css - 导航栏 HTML5 css 中奇怪的左对齐问题

Question

我试图将导航栏对齐到 950 像素宽的容器左侧，但它仍然在左侧显示边距。如何在不指定负边距的情况下将其完全左对齐？

JSFiddle

HTML5代码

<div class="nav-holder">
    <nav class="container">
        <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Programs</a></li>
        <li><a href="#">Marketing tools</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Faq</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Sign Up</a></li>
         </ul>
    </nav>
</div><!-- nav holder -->

CSS

body{margin:0}
ul {
    list-style: none;
}
.container {
    width: 950px;
    margin: 0 auto;
}
.nav-holder {
    overflow: hidden;
    background: url('images/nav-bg.jpg') repeat-x;
}
.nav-holder nav {
    overflow: hidden;
    margin-top: -3px;
    margin-bottom: 12px;
}

.nav-holder li {
    float: left;
}
.nav-holder li a {
    display: block;
    text-decoration: none;
    color: #ff0202;
    padding: 4px 23px;
    text-transform: uppercase;
    font-size: 14px;
    text-shadow: 1px 1px 1px #FFF;
}
.nav-holder li a:hover,.nav-holder li.active a {
    background: rgba(162, 162, 162, 0.7);
}

Answer 1

如果我没记错的话，所有列表(ul 和 ol)都有与之关联的默认缩进。尝试将 padding: 0; 添加到 ul 的 CSS 规则中，如下所示。

ul {
    padding: 0;
    list-style: none;
}