內嵌塊和列表中的塊

Question

好吧我是一個關於CSS的新手，而在教程期間，我完全失去了。 據我所知塊元素佔據了整條線。內聯元素只佔用元素的寬度和高度，內聯塊像內聯元素一樣工作，但在這裏您可以設置寬度和高度。

好了，現在問題。在教程中，它製作了一個無序列表：

header nav ul li { 
display: inline-block; 
padding: 0; 
} 

列表中有5個元素。現在有4個元素是「菜單」，「聯繫我們」等文本，但列表中的一個元素應該是徽標圖像。現在添加的標誌我需要這樣做：

header nav ul li#logo a:link { 
display: block; 
width: 300px; 
height: 260px; 
background: url('images/logo.png') center center no-repeat; 
} 

但我不明白的是，我先在列表中的元素以inline-block的元素（這是有道理的，因爲我希望他們旁邊彼此，其中一個是圖像）。但爲什麼在這個世界上，我必須將列表中的元素放到塊元素中？首先，我認爲它會佔據整條線（但元素仍然彼此相鄰），其次，我已經將列表中的元素變成了內聯塊元素？任何知道答案的人？

Answer 1

考慮下面你的幾點應該得到它，爲什麼錨具有display: block

1的display:block被設置爲anchor這是li裏面......不是直接到li本身。

這就是爲什麼它仍然顯示所有li彼此相鄰，因爲您將其中的一個內部元素更改爲block而不是li本身。

2-錨的默認display屬性是inline ...這意味着您無法控制width和height。

3到能夠顯示background-image內anchor你必須設置一個特定的width和height而這就是爲什麼顯示從inline改爲block到能夠控制width和height

順便說一句，你可以也使用inline-block與錨，它將工作