在 div 中，无序列表未完全对齐到左侧

Question

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

正如您所看到的那样，<li>元素没有完全对齐到它们所在的<div>的左侧。我尝试在包含<div>中使用text-align: left;，但似乎没有效果。

    #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>     

有什么想法吗？

- user670595

---

将您的代码按原样放在jsfiddle上，可以正常运行。http://jsfiddle.net/5wCZk/。您的问题出在其他地方。 - Madara's Ghost

可能是重复问题：http://stackoverflow.com/questions/1316863/make-the-unordered-list-stick-a-bit-to-the-left - PeeHaa

@Truth：不，你的问题出在 jsfiddle 上。它在幕后应用了隐藏的 CSS。 - Eric

@PeeHaa 啊，我最初搜索时没有看到那个问题。那个问题的标题措辞奇怪，这可能是我没有找到它的原因。 - user670595

@Eric：注意到了，因此我回答了:) - Madara's Ghost

Answer 1

ul和li默认情况下具有不同的外边距或内边距，这取决于浏览器。您需要在菜单中覆盖此默认样式：

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

点击此处查看演示。

^{注：默认情况下，jsfiddles会进行CSS重置，因此不总是适合测试这种类型的内容。在寻找此类问题时，请确保禁用“标准化CSS”。}

- Eric

---

谢谢。我没有意识到ul和li元素默认具有填充和边距。 - user670595

@NicYoung：这就是为什么它们在用作列表时会出现缩进的原因。不同的浏览器以不同的方式实现缩进。 - Eric

Answer 2

设置padding和margin为0px。

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

Demo

http://jsfiddle.net/tQb75/

- Satinder singh

Answer 3

您可以通过覆盖 ul 和 li 的 padding 和 margin 来实现。

这是简单的代码：

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

- user1446946

Answer 4

您可以移除菜单的边距和内边距。

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

- user1476432

Answer 5

尝试使用CSS重置。

最简单的形式是：

* { margin: 0; padding: 0; }

- Madara's Ghost

---

不确定重置所有东西是否是最好的选择。那可能会导致各种问题。 - Eric

@Eric：如果重置导致你的网站崩溃，那就是问题所在！ - Madara's Ghost

这有一定的道理。但这里还有另一个问题。在重置后，您需要为ul定义一个基本样式，以在_实际列表_中使用。再次出现了相同的问题。您需要针对导航栏定义特定的边距和填充重置。 - Eric

Answer 6

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

- WojtekT

Answer 7

我知道已经有一个被接受的答案了，但是对于那些正在使用bootstrap的人来说，更好的方法是将这个li样式抛出来。

text-align: start;

- AlpharettaTechy

Answer 8

我创建了一个文本左对齐的 div，然后给这个 div 设了 margin - x auto。这样，div 在水平方向上居中。 在该 div 中的任何 ul 都会自动左对齐且居中。我正在使用 Bootstrap 的类。

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

- Aseem