1

这个问题已经回答了

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

这是我想出的最好的，但是当添加浮动时，列表似乎飞出容器？

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

一个小小提琴 http://jsfiddle.net/ynSdU/3/

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

3 回答 3

2

只给overflow:hidden你的父母 div

实际上，当您在子元素中使用浮动时，您应该清除这些浮动，所以您没有这样做，所以我通过定义overflow:hidden您的父 div 浮动元素来清除浮动元素。

CSS

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

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

于 2012-08-21T07:06:34.503 回答
1

您需要添加一个clearfix：

我用 aspan.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并知道我已经清除了我的花车。其他方法也同样有效。:)

于 2012-08-21T07:07:57.613 回答
0

使用浮点数会将它们从布局中移除，因此它们不再影响包含 div 的高度。

你只需要在你的容器上：

.products_overview {overflow:hidden}
于 2012-08-21T07:08:41.117 回答