UL大小是我試圖不在身邊所有的子元素

製作標籤導航元素，它看起來像這樣的HTML：UL大小是我試圖不在身邊所有的子元素

<ul class="nav"> 
    <li class="selected">Selected Tab</li> 
    <li><a href="#">Not-selected Tab</a></li> 
    <li><a href="#">Not-selected Tab</a></li> 
</ul>

你可以看到什麼，我做了一個here簡裝版。

我的問題是：爲什麼ul不夠大，不適合所有的li元素？它似乎不受任何邊框或填充添加到li元素的影響。

來源

2014-04-04 Pieter Bos

我可能會問一個愚蠢的問題，但在看的URL後，我可能會問你的意思是什麼「爲什麼是UL不夠大，以適合所有li元素」？ – ForgetfulFellow

你想要更類似的東西嗎？ http://codepen.io/the_ruther4d/pen/aa431e022f8d9e4bd11f7af5c878627d/ –

@遺忘我不確定如何以其他方式說出它。 ul的底部不等於li的底部，我希望它是？ –

而不是

.nav li { 
    display: inline; 
    top: 9px; 
}

使用

.nav li { 
    display: inline-block; 
}

Demo

不要使用inline如果他們塊，因爲那時他們不產生框塊推<ul>'的底部。

而且不要使用top: 9px，因爲這會向下移動<li>，在<ul>之外移動。

來源

2014-04-04 22:04:25 Oriol

問題是你在填充li的時候仍然是內聯元素。此外，您正在使用top: 8px這進一步複雜的問題。有幾個選項可以解決。 1：您製作li的display: inline-block並刪除top: 8px或2.您浮動li（並在ul上使用清晰的修正）。希望這是有道理的。

option 1 demo

option 2 demo

來源

2014-04-04 22:12:18

UL大小是我試圖不在身邊所有的子元素

回答

相關問題