0

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

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);
}
4

2 回答 2

2

如果我没记错的话，所有列表（ul 和 ol）都有与之关联的默认缩进。尝试padding: 0;为 ul 添加一个 CSS 规则，如下所示。

ul {
    padding: 0;
    list-style: none;
}
于 2013-08-03T03:50:52.323 回答
2

采用padding-left

http://jsfiddle.net/fDJA8/4/

ul {
    padding-left : 0px;
}
于 2013-08-03T03:57:39.677 回答