我的頂部填充在哪裏？

通過CSS我添加了填充到li的s。

該li的有display: inline。

它適用於我設置爲inline-block，但我想知道爲什麼它不適用於inline。在我的理解填充應該與內聯元素一起工作。

HTML

<header> 
<nav> 
    <ul id="mainmenu"> 
    <li><a href="#" class="active">Home</a></li> 
    <li><a href="#" class="active">Users</a></li> 
    <li><a href="#" class="active">Rankings</a></li> 
    <li><a href="#" class="active">In the press</a></li> 
    <li><a href="#" class="active">Blog</a></li> 
    </ul> 
</nav> 
</header>

CSS

body { font-family: Arial; font-size: 11px; margin: 0; padding: 0; } 
header nav { height: 25px; background: #eeeeee; } 
header nav ul { list-style-type: none; margin: 0 auto; padding: 0; width: 960px; } 
header nav li { display: inline; padding: 10px 5px; }

工作演示

http://jsfiddle.net/4QLmp/

PS瀏覽器是Chrome Canary版

來源

2011-11-07 PeeHaa

你爲什麼要測試一個馬車和未經測試的夜間瀏覽器？ – balexandre

@balexandre：我不認爲這是金絲雀，甚至瀏覽器的具體情況。只是想注意確定。 – PeeHaa

填充位於那裏，但由於<li>被定義爲內聯，所以它們對齊到相同的文本基線。這將頂部填充切掉超出頁面邊界的頂部。如果您確實將css更改爲：

header nav li {display：inline; padding：20px 5px;邊框：1px純紅色;位置：相對; }

因此<ul>被推下來，你會看到填充存在。內嵌塊不遵循相同的文本對齊規則，因此所有內容都被壓下，因此整個塊都可見。

來源

2011-11-07 20:15:32

唯一正確的答案。感謝您的解釋。 – PeeHaa

-1

header nav li { display: inline; padding: 10px 5px; }

UPD：

W3C的CSS2規範指出，內聯，非替換元素「的‘高度’屬性不適，但框的高度由‘行高’屬性給出」。

來源

2011-11-07 20:13:26 pomaxa

你讀過我的問題了嗎？ – PeeHaa

對不起。 W3C的CSS2規範指出，對於Inline，非替換元素，「'height'屬性不適用，但框的高度由'line-height'屬性給出。 – pomaxa

你可以使用行高來達到相同的效果 – pomaxa

我的頂部填充在哪裏？

回答

相關問題