Question

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

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;添加到您的CSS规则中，如下所示。

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

Answer 2

使用padding-left

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

ul {
    padding-left : 0px;
}

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

2 个答案: