Question

我一直想把这个小小的虫子弄出来一会儿，现在我寻求一些专业知识。我想做什么？我想创建一个100％宽的菜单栏，但保留徽标，内容居中，以便它可以与其他内容相适应。容器是1000px。现在我将我的菜单放在容器标签之外，并使用“width：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

Answer 1

要设置具有设定宽度的内容，请添加样式margin:auto。更准确地说，您只需要margin-left:auto和margin-right:auto来为容器内的元素提供相等的填充。

Answer 2

使用div将您的导航代码写在另一个class=container内。

那是

<body>
<div class="container">
<!-- your navigation code here-->
</div>
</body>

如何将我的内容集中在菜单中？

2 个答案: