Html 无序列表在 div 中没有一直向左对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10972096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unordered list not aligning all the way to the left in a div
提问by Nic Young
I have an unordered list that I am using as a simple navigation bar. That looks like below:
我有一个无序列表，用作简单的导航栏。如下所示：
As you can see though that <li>elements are not aligning all the way to the left of the <div>they are contained in. I have tried text-align: left;in the containing <div>but that seems to have no effect.
正如你所看到的，虽然<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> Any ideas?
有任何想法吗？
回答by Eric
uland lihave margin or padding, depending on the browser, by default. You need to override this default style within your menu:
ul并且li默认情况下有边距或填充，具体取决于浏览器。您需要在菜单中覆盖此默认样式：
#menu ul, #menu li {
margin: 0; padding: 0;
}
See a demo here
在此处查看演示
Note: By default, jsfiddles does a CSS reset, so is not always well suited for testing this kind of thing. Make sure to disable "Normalized CSS" when looking for this kind of bug.
注意：默认情况下，jsfiddles 执行 CSS 重置，因此并不总是适合测试此类事情。在查找此类错误时，请确保禁用“标准化 CSS”。
回答by Satinder singh
set padding,margin 0px,
设置填充，边距 0px，
#menutop ul {
padding: 0;
margin: 0;
list-style: none;
}
回答by Madara's Ghost
回答by Madara's Ghost
you can just override ul and li padding and margin.
您可以覆盖 ul 和 li 填充和边距。
this simple code:
这个简单的代码：
.menu ul, .menu li{
margin:0;
padding:0;
}
回答by Madara's Ghost
You can remove the margin and padding of menu
您可以删除菜单的边距和填充
#menu *{
margin:0;
padding:0;
}
回答by WojtekT
<ul>element is align left, but <li>elements have padding-leftset to 10px. That's why the first element is slightly to the right.
<ul>元素左对齐，但<li>元素已padding-left设置为10px。这就是为什么第一个元素稍微向右的原因。
