Question

我遇到一些问题让我的导航在其容器中间正确对齐。我认为将margin-left和margin-right设置为auto会有所帮助，但在某些屏幕上（和浏览器它仍然不对，显然太远了。）

另外，它下方的1px边框在Chrome上看起来不错，但在Firefox上填充的内容太多了。

以下是页面：http://www.mangdevelopment.co.uk/ghfurnishings/index.html

<section id="navigation">
<div class="container">
    <div class="row">  
        <div id="navigation-container">
            <div class="span12">
            <!-- Start Navigation Bar -->
                <nav class="nav">
                    <ul>
                        <li class="bullet-point"><a href="index.html" class="active">HOME</a></li>
                        <li class="bullet-point"><a href="projects.html">PROJECTS</a></li>
                        <li class="bullet-point"><a href="#">CASE STUDIES</a></li>
                        <li class="bullet-point"><a href="profile.html">PROFILE</a></li>
                        <li class="bullet-point"><a href="#">NEWS &#38; EVENTS</a></li>
                        <li class="bullet-point"><a href="location.html">LOCATION</a></li>
                        <li class="bullet-point"><a href="contact.html">CONTACT</a></li>
                    </ul>
                </nav>
            <!-- End Navigation Bar --> 
            </div>
        </div>
    </div> <!-- End of row containing navigation -->
</div>

CSS

#navigation-container {
border-top: 1px solid #9d9f96;
border-bottom: 1px solid #9d9f96;
padding-top: 10px;
padding-bottom: 50px;
}

.nav {
margin-bottom: 30px;
}

.nav a {
color: #9d9f96;
}

.nav a.active {
color: #636763;
}

.nav li {
display: inline;
list-style-type: none;
padding-right: 15px;
font-size: 1.1em;
font-family: "Copperplate Gothic Light";
}

.nav ul {
width: 900px;
}

.nav ul li a {
    text-decoration: none;
}

.nav ul li a:hover, ul li a:focus {
    color: #636763;
}

.bullet-point {
    margin-top: 0px;
    margin-right: 0px;
    list-style:none;
    float:left;
}
.bullet-point:after {
    content:" • ";
    margin-left: 7px;
}
.bullet-point:last-child:after {
    content: "";
    padding-right: 0px;
}

Answer 1

试试这个css。这样可以正常工作

.nav ul {
     width:768px;
     margin:0px auto;
}

导航位置在中间

1 个答案: