我如何讓父母的子女成爲他們的孩子？

我有一個UL風格的水平菜單，但父div不會調整到子元素的高度。這裏有一個的jsfiddle：http://jsfiddle.net/STSjm/202/

HTML

<div class="menu"> 
<ul> 
    <li><a href="#">Menu 1</a></li> 
    <li><a href="#">Menu 2</a></li> 
    <li><a href="#">Menu 3</a></li> 
</ul> 
<div class="clear"></div>

而CSS：

.menu { 
    background: blue; 
} 

.menu li{ 
    float: left; 
    background: green; 
} 

.menu li a{ 
    background: red; 
    padding: 25px 25px 25px 25px; 
} 

.menu li a:hover{ 
    background: orange; 
} 

.clear { 
    clear: both; 
}

來源

2012-01-21 convoke

明確的方法運作良好，菜單將是他的孩子的高度。但是.menu的孩子是ul。而且ul沒有他的孩子的身高。所以在ul> li之間有一個問題。例如：http://jsfiddle.net/STSjm/215/ –

jsfiddle版本202？你一直在這個呃很努力？ ;） –

哦。我也是jsFiddle的新手。我肯定沒有做過205次迭代。我現在記得：我帶着別人jsFiddle提出了一個不同的問題，並開始研究它。也許這是不好的形式... 如果你回到100，你會發現它是完全不同的東西。我只是想出所有這些新奇的工具......原諒我。 – convoke

這裏的是怎麼回事：

你<a>元素都有填充物，但他們默認爲display:inline它在之外添加了填充的元素，而實際上並沒有爲其添加寬度/高度，這就是爲什麼菜單沒有展開。

爲了解決這個問題，設置display:block到錨：

http://jsfiddle.net/STSjm/216/

此外，你並不需要「清除」分區，將這個CSS應該做的伎倆：

.menu { float:left; width:100%; }

http://jsfiddle.net/STSjm/218/

還有一些CSS只有「clearfix」技巧來解決這個問題，而不會增加額外的不必要的H TML標記。

來源

2012-01-21 18:18:21

完美！謝謝！ – convoke

沒問題，歡迎來到本網站，感謝您提供一個清晰，整齊的解釋你的問題，源代碼和現場演示。優秀。 –

我如何讓父母的子女成爲他們的孩子？

回答

相關問題