0

一段时间以来，我一直试图弄清楚这个小混蛋，现在我寻求一些专业知识。我想做什么？我想创建一个 100% 宽度的菜单栏，但要保持徽标和内容居中，以便它可以与其余内容相适应。容器在 1000px 上。现在我把我的菜单放在容器标签之外，并使用“宽度：100%”让它覆盖屏幕。然而，随着内容向左移动。我真的不知道如何解决这个问题，我已经研究了一段时间。

这是我的 HTML 代码：

    <body>
    <!-- navigation / header -->
    <div class="grid_12" id="menu">
        <div class="grid_3" id="logo">
            <img src="img/logo.png" alt="logo" />
        </div>

        <div class="grid_9 omega">
            <ul class="nav">
                <li>
                    <label>
                        <a href="#">Features</a>
                        <br />Check our features
                    </label>
                </li>
                <li>
                    <label>
                        <a href="#">Pricing</a>
                        <br />Starts at $X/month
                    </label>
                </li>
                <li>
                    <label>
                        <a href="#">30-day free trial</a>
                        <br />Start using us right away
                    </label>
                </li>
                <li class="sign-btn">
                    <a href="#">Log in</a>
                </li>
            </ul>
        </div>  
    </div>

    <div class="container clearfix">

这是我的css文件：

#menu {
width:100%;
margin: 0 0 0 0;
padding: 0;
background: #1d3853;
color: white;
font-size: 13px;
}
.nav li {
padding-top: 15px;
list-style:none;
float: left;
text-align: center;
margin-right: 20px;
}
.nav li a {
color: #a7c5e3;
font-family: helvetica;
font-weight: bold;
letter-spacing: 1px;
}
.sign-btn a {
color: #FFF;
display: block;
background: #105296;
padding: 10px 15px;
text-align: center;
border-radius: 5px;
border: 1px solid white;
}

所以我再次问，亲爱的 StackOverflow……我如何将我的链接与我的其余内容放在中心。喜欢这张图片：http ://www.cssnewbie.com/wp-content/uploads/2009/12/centered-navbar-sketch.png

4

2 回答 2

0

要以设定的宽度居中，请添加 style margin:auto。更准确地说，您只需要margin-left:auto和margin-right:auto为容器内的元素提供相等的填充。

于 2013-09-15T18:21:16.803 回答
0

div用.在另一个里面写你的导航代码class=container。

那是

<body>
<div class="container">
<!-- your navigation code here-->
</div>
</body>
于 2013-09-15T18:21:27.553 回答