Question

链接根本不会改变“持有者”的高度，真的我不知道出了什么问题

HTML：

<div id="holder">
<a class="button" href="#"><span>home</span></a>
<a class="button" href="#"><span>example</span></a>
<a class="button" href="#"><span>another examp.</span></a>
<a class="button" href="#"><span>hello</span></a>
<a class="button" href="#"><span>abc</span></a>
</div>

CSS：

*{
margin:0;
padding:0;
}
#holder{
width:100%;
background: #000;
border: 1px solid red;
}
.button {
    color: #444;
    display: block;
    float: left;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px;
}
.button span {
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}
.button:hover {
    background: #333 url('./images/bg_button_a.jpg') no-repeat scroll top right;
    outline: none;
}

.button:hover span {
    background: #333 url('./images/bg_button_span.jpg') no-repeat;
}

Answer 1

元素不会自动扩展以包含浮动的后代。

添加overflow: hidden是 clearfix 的一种类型，只要您不介意在元素的边界框处剪切元素，这是最简单的。

#holder {
   overflow: hidden;
}

Further Reading

Answer 2

这是因为它们是浮动的：左边，这些子元素不会扩展其父元素的尺寸。最简单的方法是添加

 <div style="clear:both;"></div>

在孩子们的结尾。 E.g：

<div id="holder">
    <a class="button" href="#"><span>home</span></a>
    <a class="button" href="#"><span>example</span></a>
    <a class="button" href="#"><span>another examp.</span></a>
    <a class="button" href="#"><span>hello</span></a>
    <a class="button" href="#"><span>abc</span></a>
    <div style="clear:both;"></div>
</div>

Answer 3

开盘但是关闭李可能会造成一些麻烦。

<a class="button" href="#"><span>hello</li></a>

Answer 4

浮动元素不扩展其容器的高度。基本上，它们都绑定到容器的顶部（在视觉上并非如此）。

在容器底部使用带有clear:left的div来展开它以包含浮动元素。

Answer 5

浮动元素不计入其父级的高度在overflow: hidden;上设置#holder是纠正错误的巧妙方法。

为什么这些链接不会改变我的div的高度？

5 个答案: