Question

我有一个简单的清单：

<ul id="menu">
    <li>Homepage</li>
    <li>Contact</li>
    <li>About</li>
</ul>

CSS：

#menu {
    background: #000000;
    width: 984px;
}

#menu li {
    float: right;
    background: url('../images/menu_button.png');
    width: 166px;
    height: 36px;
    margin: 10px 15px;
}

这是水平菜单，你可以看到（主页|联系|关于我们）。

但是#menu背景（＃000000）没有显示（因为li标签中的浮动）。我能做什么？我想在某处插入clear: both ..

Answer 1

为overflow:hidden添加#menu，这样您就可以清除浮动。

演示： http://jsfiddle.net/gRwBX/

Answer 2

我认为有很多方法可以解决您的问题：

使用:after伪类（推荐）
演示：http://jsfiddle.net/timezhong/bjcuA/
使用float（常见）
演示：http://jsfiddle.net/timezhong/SbLM2/
使用width和overflow:hidden（常见）的组合
使用<br />（不推荐）
使用空div和div#clear {clear:both}作为造型（不推荐）

Answer 3

以下代码可以解决您的问题：

#menu {  
background: none repeat scroll 0 0 #000000;  
color: white;  
min-height: 50px;  
width: 984px;  }

修改
如果情况有所不同，那么您应该设置min-height而不是height，它会像魅力一样。

列表与背景和浮'li'

3 个答案: