Question

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

5个对象：

enter image description here

7个对象：

enter image description here

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 -->

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;}

Answer 1

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

您需要添加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; }

Answer 2

在同一行中有两个浮动元素，如果宽度和它们的总和大于可用空间，它们将断开线并将第二个浮动元素放在前一个下方：在您的情况下导航下面的徽标。为每个人添加边框，你会发现它们太大了。

另一种选择是：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;}

请注意，我写了你要添加的内容，并评论要删除的内容，其余的，留下你已经拥有的内容。

Answer 3

只要您没有下拉子菜单，我建议您使用overflow：hidden。

nav ul {
    overflow: hidden;
}

Answer 4

如果您无法更改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%;
}

导航宽度不随内容而变化

4 个答案: