想不通的是與這個HTML/CSS發生。

我正在開發一個個人網站，我會很感激，如果有人可以幫我找出了導致以下HTML和CSS代碼顯示。想不通的是與這個HTML/CSS發生。

HTML：

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>My Title</title> 
    <link href="css/style.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
    <nav role="navigation"> 
     <ul class="navlist"> 
     <li><a href="#">Bio</a></li> 
     <li><a href="#">Videos</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Whatever</a></li> 
     </ul> 
    </nav> 
    </body> 
</html>

CSS：

* { 
    border: 1px dotted lightblue; 
    margin: 0; 
    padding: 0; 
} 

a { 
    text-decoration: none; 
} 

ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

ul.navlist li { 
    display: inline-block; 
} 

ul.navlist li a { 
    padding: 25px; 
}

特別是：

爲什麼<a>元素的頂部填充無法識別/顯示吧？
爲什麼<ul>和<li>元素的高度與<a>元素的高度相同，後者的填充「溢出」底部？
我想要<ul>和<li>元素的高度與包含其填充的<a>元素的高度相同，因此列表項保持垂直居中，頂部和底部填充的填充量相同。我怎樣才能做到這一點？

來源

2015-11-24 Rafuka

A是內嵌元素。爲了使它表現爲塊級元素，添加display: block;聲明：

.navlist A {display: block; }

順便說一句，如果菜單旨在佔據無包裝多行正好一條線，它可能是有意義的使用display: table爲UL元件和用於display: table-cellLI元件。這會自動刪除（通常不需要的）項目之間的空白。

來源

2015-11-24 21:37:31

感謝您的快速反應。我試過你的建議，但我需要列表項目水平保持在同一行。 – Rafuka

打敗我吧。下面是這一個小提琴：https://jsfiddle.net/bwmgfcdu/ – levelonehuman

@Rafuka'直列block'的父元素（在你的情況下'LI';你已經擁有它）應爲現代瀏覽器至少是足夠的。另外，您'LI'內嵌'顯示：inline'，並應用'顯示：內聯block'到鏈接本身。或者使用'display：table'（請參閱更新後的答案）。 –

你期待他們表現爲一個塊級元素，但<a>是內聯元素之類的東西width，height，padding和margin行爲並不像他們想，如果他們是一個塊級元素。

如果你想接受的事情像width，height，padding和margin設置你的錨元素display: inline-block;。

除非您要添加其他元素到您的.navlist<ul>您可以簡化您的CSS選擇器<ul>中的錨元素到以下內容，這有效地刪除了原始選擇器中不需要的額外特性。

.navlist a { 
    display: inline-block; 
    padding: 25px; 
}

http://jsfiddle.net/kcofsrxh/1

來源

2015-11-24 21:42:16 hungerstar

想不通的是與這個HTML/CSS發生。

回答

相關問題