2

几周前我开始使用 HTML 和 CSS，这种情况发生了好几次，我不知道为什么。

有时我将背景应用于父元素，在其上包含一些内容，但父元素height的保留0而不是子元素的接收height。有时确实如此（我认为这应该是正确的行为，不是吗？）

我的词汇表选择器得到0高度。因此我的背景颜色不显示。

.glossarySelector {
  background: #EFEFEF; 
}

<div class="glossarySelector">
  <ul>
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
    <li><a href="#">E</a></li>
  </ul>
</div>

为什么？

你可以在这里看到完整的代码。

4

5 回答 5

3

编辑：这个 SO 答案提供了几种解决此问题的方法，每种方法都有其优点和缺点：https ://stackoverflow.com/a/1633170/388916

当一个元素没有子元素或者子元素从页面流中使用position: absolute或浮动移除时，它是完全平坦的（0px 高度）。由于列表元素都有， glossarySelectorfloat: left内没有更多元素来扩展它的高度。

我看到您创建了一个名为“clearFix”的类。只需在glossarySelector div 中添加一个具有该类的div 即可修复浮动问题：

<div class="glossarySelector">
    <ul>
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
        <li><a href="#">E</a></li>
    </ul>
    <div class="clearFix"></div>
</div>

小提琴：http: //jsfiddle.net/gTKNk/12/

于 2012-10-30T12:59:36.460 回答
1

您可以在词汇表选择器上使用“clearfix”。

.glossarySelector
{
     background: #000;
     overflow: hidden;
}

请参阅我可以使用哪些“clearfix”方法？用于替代 clearfix 方法。

于 2012-10-30T12:59:10.090 回答
0

“溢出：隐藏”是解决此问题的技巧。希望这可以帮助。

.glossarySelector
    {
    background-color: #ff0000;
    overflow:hidden;
    }

这里的例子。

这个答案解释了有关清除修复的所有内容。

于 2012-10-30T13:03:06.537 回答
0

那是因为float: left列表项上有一个<li>

你可以这样做：

.glossarySelector {
  background: #EFEFEF;
  overflow: hidden;
}

或添加一个clearfix

于 2012-10-30T13:05:44.830 回答
-2

div 的默认显示模式是“块”，在所有情况下都不会环绕它的内容。你应该添加display: inline-block;

在您的代码中，由于 ul 元素，列表仍将在右侧重叠left: 30px，但如果您将其替换为margin-left:30px;orpadding-left:30px;它将正常工作；）

于 2012-10-30T13:02:35.887 回答