0

我有一个导航栏，当我有 5 个导航对象时显示正常，但是当我再添加 3 个时，它会下降到主标题下方，为什么？

5个对象：

在此处输入图像描述

7个对象：

在此处输入图像描述

HTML：

<div id="header">
    <div class="w960">
        <div id="logo">
            <h2>Text</h2>
            <p>Text</p>
        </div>
        <nav>
            <ul>
                <li class="first active">
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                </li>
                <li>
                    <a href="#">3</a>
                </li>
                <li>
                    <a href="#">4 </a>
                </li>
                <li class="last">
                    <a href="#">5</a>
                </li>
            </ul>
        </nav>
    </div>
</div><!-- end of header -->

​</p>

CSS：

#header{background:#2d2d2f;width:100%; height:120px;clear:both;font-family:Signika,Arial,sans-serif;}

.w960 { width:960px; margin:auto; }

nav{width:auto; float:right;line-height: 50px;}
nav ul li{font-size:14px; float:left;display: inline-block;padding: 0px 11px;text-transform:uppercase;}
nav ul li a{padding: 0px 10px; color:#ffb400; text-decoration:none;}
nav ul li a:hover, .active a{color:#fff}

#logo{width: 40%;float: left;height: 90px;}
#logo h2{line-height: 41px;color:#FFB400;font-size:28px;}
#logo h2 span{color:#FFB400;}
#logo p {margin-top: -25px;color:#b8bbbc;}
4

4 回答 4

1

如果你的意思是问为什么标题容器的背景没有出现在链接后面，那是因为浮动li的s。

您将需要添加一个clearfix类。

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

并将该类应用于您的标题：

<div id="header" class="clearfix">

如果您的意思是他们为什么要分解一条线，那是因为<div class="w960">容器上的固定宽度。

.w960 { width:960px; margin:auto; }
于 2012-10-18T23:11:32.683 回答
1

您在同一行中有两个浮动元素，如果两个宽度之和大于可用空间，它们将打破该行并将第二个浮动元素放置在前一个下方：在您的情况下，导航位于徽标下方。给它们每一个添加边框，你会发现它们太大了。

一种替代方法是：http: //jsfiddle.net/Bs93k/

nav{width:auto; /*float:right;*/ overflow:auto; line-height: 50px;}

这将使 nav 占用可用空间，但是，我认为它的内容不会像你喜欢的那样表现。

第二种选择是：http: //jsfiddle.net/PU7hV/

#header{display:table;}
.w960 {position:relative;}
nav{/*float:right;*/ position:absolute; top:0; right:0;}

请注意，我写了您必须添加的内容并评论了要删除的内容，其余的，让它们保持原样。

于 2012-10-18T23:39:18.510 回答
0

只要您没有下拉子菜单，我建议您使用溢出：隐藏。

nav ul {
    overflow: hidden;
}
于 2012-10-18T23:17:14.117 回答
0

如果您无法更改 HTML（例如，您无权访问输出 HTML 的脚本）添加 clearfix，您可以像这样更改 CSS：

#header {
    background: none repeat scroll 0 0 #2D2D2F;
    clear: both;
    float: left;
    font-family: Signika,Arial,sans-serif;
    height: auto;
    width: 100%;
}
于 2012-10-18T23:23:05.007 回答