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

的联系完全不改变 “持有人” 的高度，我真的不知道什么是错为什么这些链接不会改变我的div的高度？

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; 
}

来源

2011-09-08 ajax333221

为什么你打开'span'然后关闭'li'？ – alex

哎呀，因为我试了一切，（但我可以向你保证，这不是问题） – ajax333221

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

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

#holder { 
    overflow: hidden; 
}

Further Reading。

来源

2011-09-08 23:12:18 alex

+1这需要更多的推广超过过多的'

'。 – deceze

我可能会用它来代替'clear：both'^^ – ajax333221

这是因为它们是float：left，这样的子元素不会扩展父级的维度。抵消这种最简单方法是在孩子们的末尾添加

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

。例如：

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

来源

2011-09-08 23:10:35

击败我30秒！ :) – smdrager

打开跨度但关闭li可能会导致一些麻烦。

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

来源

2011-09-08 23:10:50

浮动元素不扩展其容器的高度。实质上，它们都绑定在容器的顶部（视觉上不是这种情况）。

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

来源

2011-09-08 23:11:26 smdrager

浮动元素不计入其父母的高度。
设置overflow: hidden;在#holder是一个巧妙的技巧来纠正这一点。

来源

2011-09-08 23:11:26 deceze

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

回答

相关问题