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

Question

我有一个无序列表,我用作一个简单的导航栏.如下所示:

正如你所看到的那样,<li>元素并没有一直对齐<div>它们所包含的左边.我已经尝试text-align: left;了包含<div>但似乎没有效果.

相关HTML:

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

相关CSS:

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

有任何想法吗？

Answer 1

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

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

在这里看一个演示

^{注意:默认情况下,jsfiddles执行CSS重置,因此并不总是非常适合测试此类事情.在查找此类错误时,请务必禁用"规范化CSS".}

Answer 2

设置内边距，边距0px，

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

演示

http://jsfiddle.net/tQb75/