2

可能重复：
如何适应 div 的高度以包裹其浮动的孩子

我想要一个<ul>里面<div>有一堆浮动的<li>。唯一的问题是包含<div>折叠为 0px 高。我如何使<div>保持它的高度好像它包含<li>？

HTML：

<div>
   <ul>
      <li>stuff</li>
      <li>morestuff</li>
   </ul>
</div>

CSS：

div {
background: rgb(90, 90, 90);
}

ul {
color: red;
}

li {
float: left;
clear: none;
margin-right: 10px;
}

如果使用花车是过时的并且您知道更好的风格，请告诉我！

4

4 回答 4

2

选项 1（推荐）：overflow:hidden;给出将校正其高度的 div 样式。

选项 2：或者在当前 div 的末尾添加一个更清晰的 div

<div>
   <ul>
      <li>stuff</li>
      <li>morestuff</li>
   </ul>
   <div style="clear:both;"> </div>
</div>

jsFiddle 演示

编辑：澄清一下，以上两者都具有完整的跨浏览器支持，并且不需要黑客或无效的 CSS。

于 2012-12-07T07:10:02.560 回答
2

尝试Display:inline-block;

li {
display:inline-block;
    margin-right: 10px;
}

演示

跨浏览器内联块

于 2012-12-07T07:10:25.167 回答
0

要解决您的确切问题：

div {
    background: rgb(90, 90, 90);
    overflow: auto;
}

也许是一种不那么“过时”的方法：

div {
    background: rgb(90, 90, 90);
}
ul {
    color: red;
}
li {
    display: inline-block;
    *vertical-align : auto;
    *display: inline; // targets IE7 and such, same effect
    margin-right: 10px;
}

您需要调整 li 元素上的 margin-right 以匹配您的确切规格。使用浮点数仍然很酷，但是为什么要在显示时打扰：inline-block 将解决您想要的大部分内容？？？

PS：有时 IE hack 是可以的——我建议使用像 Sass 这样的预处理器和像 Compass 这样的库来帮助你管理它们。

关于这个问题的几篇文章：

于 2012-12-07T07:14:36.800 回答
0

每当您使用FLOAT属性时，也不要忘记添加clear属性

你可以试试这个

<div>
   <ul>
      <li>stuff</li>
      <li>morestuff</li>
      <li style="clear:both;float:none"></li>    <!-- Added Clear, removed float -->       
   </ul>
</div>​​​​​​​​​​​​​​​​
于 2012-12-07T07:32:41.777 回答