0

CSS：

ul#navlist {
    list-style-type: none;
    padding: 0;
    margin: 0;
    float: left;
    width: 100%;
    color: #fff;
    background-color: #036;
}

ul#navlist li {
    display: inline;
}

ul#navlist li a {
    float: left;
    width: 5em;
    color: #fff;
    background-color: #036;
    padding: .2em 1em;
    text-decoration: none;
    border-right: 1px solid #fff;
}

ul#navlist li a:hover {
    background-color: #369;
    color: #fff;
}

HTML：

<ul id="navlist">
  <li><a href="#">Item one</a></li>
  <li><a href="#">Item two</a></li>
  <li><a href="#">Item three</a></li>
</ul>

问题：

如果我删除此行：float:leftinside ul#navlist，background-color: #036;将不会显示，为什么？

4

2 回答 2

3

浮动项目会将其从正常的文档流中移除。这就是为什么您必须在父元素上建立块内容或明确清除浮动的原因：

/* All of the following will work: */

ul#navlist {
    float: left;
   /* problem: the element itself is removed from the document flow */
}

ul#navlist {
    overflow: hidden;
    /* problem: dropdown lists will get truncated */
}

ul:after {
    content: "";
    display: block;
    clear: both;
    /* problem: compatibility with older browsers */
}

可能的其他解决方案是不浮动li/a而是使用display:inline-block，这会在显示为“魔术边距”的元素之间带来一个新的空白问题。

所有这些方法都有一定的限制，你应该选择最适合你的一种。

于 2013-07-23T08:13:35.300 回答
1

习惯了这个并删除 float left;

    ul#navlist:after{
        content:'';
        overflow:hidden;
        clear:both;
        display:table;

    }
ul#navlist li {
    display: inline-block;  // add this line
    vertical-align:top;  // add this line
}

ul#navlist li a {
    display:block; // add this line and remove float left
    width: 5em;
    color: #fff;
    background-color: #036;
    padding: .2em 1em;
    text-decoration: none;
    border-right: 1px solid #fff;
}

演示

于 2013-07-23T08:12:02.707 回答