爲什麼這些鏈接不會改變我的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的高度？

回答

相關問題