Question

这个问题已被回答

我有这个包含两个无序列表的div。我希望将这些列表放在每个列表的旁边，而不是放在彼此的上方/下方。

这是我提出的最佳选择，但是当添加浮动时，列表似乎会从容器中飞出来？

为什么会这样？它似乎与UL上的浮子有关。

CSS

.products_overview {width:100%; border: 3px solid #F00;opacity:0.95;height: 50px;}
.products_overview ul{list-style:none;float:left;border-left:1px solid #666;margin:20px 0px 10px 30px;padding:10px;} 
.products_overview li.ldd_heading {font-family: Georgia, serif;font-size: 13px;font-style: italic;color: #333; padding:0px 0px 10px 0px;}
.products_overview li.ldd_heading a.link {font-family: Georgia, serif;font-size: 13px;font-style: italic;color:#333;padding:5px 3px 5px 3px; }
.products_overview ul li a{font-family: Arial, serif;font-size:10px;line-height:20px;color:#333;padding:1px 3px;text-decoration:none;}
.products_overview ul li a:hover{-moz-box-shadow:0px 0px 2px #333; box-shadow:0px 0px 2px #333;background: #CCC;}

HTML

以下代码由DIV围绕着类别：products_overview !!!

<ul>
    <li class="ldd_heading"><a class='link'>header</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>                           
</ul>  
<ul>
    <li class="ldd_heading">header</li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>   
    <li><a href="#">3</a></li>                                  
</ul>

Answer 1

只需将overflow:hidden提供给您的父div

即可

实际上当你在子元素中使用float时，你应该清除那些浮点数，这样你就不会这样做了，所以我通过定义overflow:hidden来清除你的父div浮点元素将是明确的。

<强> CSS

.products_overview {width:100%; border: 3px solid #F00;opacity:0.95; overflow:hidden;}

http://jsfiddle.net/ynSdU/4/

Answer 2

您需要添加一个clearfix：

我使用span.clear来清除你的花车。

...<li><a href="#">3</a></li>                                  
</ul>
<span class="clear">&nbsp;</span>
</div>

CSS：

span.clear
{
    clear: both;
    display: block;
}

http://jsfiddle.net/Kyle_Sevenoaks/ynSdU/7/

我更喜欢使用此方法以便于阅读。我可以看到span.clear并且知道我已经清除了我的花车。其他方法也可以。：）

Answer 3

使用浮动将它们从布局中取出，因此它们不再影响包含div的高度。

您需要的就是容器上的所有内容：

.products_overview {overflow:hidden}

css导致溢出

3 个答案: