html - 无序列表未在 div 中一直向左对齐

Question

我有一个无序列表，用作简单的导航栏。如下所示：

正如您所看到的，尽管<li>元素并没有一直对齐到<div>它们所在的左侧。我已经尝试text-align: left;过包含<div>但似乎没有效果。

    #menu {
        width: 800px;
        margin: 0 auto;
    }
    
    #menu div {
        float: left;
        width: 400px;
        height: 60px;
        background-color: #CACACA;
    }
    
    #menutop {
        text-align: left;
    }
    
    #menutop ul {
        list-style: none;
    }
    
    #menutop li {
       display: inline;
       padding: 10px;
    }
    
    #menutop a {
        color: #000000;
        text-decoration: none;
    }
    
    #menutop a:hover {
        text-decoration: underline;
    }
      

    <div id="menu">                                                                         
        <div id="menutop">                                                                  
            <ul>                                                                            
                <li><a href="#">Home</a></li>                                               
                <li><a href="#">About</a></li>                                              
            </ul>                                                                           
        </div>     

有任何想法吗？

Answer 1

ul并且li默认情况下有边距或填充，具体取决于浏览器。您需要在菜单中覆盖此默认样式：

#menu ul, #menu li {
    margin: 0; padding: 0;
}

在此处查看演示

^{注意：默认情况下，jsfiddles 会重置 CSS，因此并不总是很适合测试这种事情。在寻找这种错误时，请确保禁用“规范化 CSS”。}

Answer 2

设置 padding,margin 0px,

#menutop ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

演示

http://jsfiddle.net/tQb75/

Answer 3

您可以覆盖 ul 和 li 填充和边距。

这个简单的代码：

.menu ul, .menu li{
   margin:0;
   padding:0;
}

Answer 4

尝试使用CSS Reset。

最简单的形式是：

* { margin: 0; padding: 0; }

Answer 5

您可以删除菜单的边距和填充

#menu *{
margin:0;
padding:0;
}

Answer 6

<ul>元素左对齐，但<li>元素已padding-left设置为10px。这就是为什么第一个元素稍微偏右的原因。

Answer 7

我创建了一个文本左对齐的 div，然后给了那个 div 边距 - x auto。这样 div 水平居中。该 div 内的任何 ul 都会自动左对齐并居中。我正在使用 Bootstrap 类。

<div class="text-left mx-auto"> 
  <ul> 
    <li></li>
  </ul>
</div>