html - Background of Div with list doesn't work

Question

I need help on adding a background on my DIV. But I can't make it work.

Please refer on http://jsfiddle.net/NGyWu/8/

I created one DIV with black background. Inside a DIV is a paragraph and list

Problem: Only the paragraph has black background. The list doesn't have. I want the black background of the entire DIV.

Answer 1

添加overflow:auto;到#topbar.

检查：http: //jsfiddle.net/NGyWu/12/

或者，您可以使用clearfix

Answer 2

这是因为 UL 中的浮点数以及您在其中分配给 UL 的相对位置。

添加position: absolute到#topbar它，它将按照您的预期呈现。

Answer 3

你<ul>的浮动到左边，你需要清除你的浮动。

见：http: //jsfiddle.net/NGyWu/17/

<div id="topbar">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel quam vehicula, congue orci et, pulvinar dolor.</p>    

    <ul>
        <li><a href="#">Link one</a></li>
        <li><a href="#">Link two</a></li>
        <li><a href="#">Link three</a></li>
        <li><a href="#">Link four</a></li>                  
    </ul>
    <div style="clear: both;"></div>
</div>

Answer 4

这是更新的小提琴http://jsfiddle.net/NGyWu/11/

我所做的是：

1. 已从float:left_<ul>
2. 显示<li>为inline-block;

Answer 5

你的<ul>元素是浮动的。该浮动需要清除。

<ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>                  
</ul>
<br style='clear:both'>

将解决您的问题（更新的 JSFiddle）。