水平菜單的問題

我在嘗試區分水平菜單示例中的display: block和display: inline-block之間的區別時遇到了一些問題。水平菜單的問題

下面的代碼行從小提琴鏈路提取上述

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 16px; 
    text-decoration: none; 
}

提到我應該使用display: block或display: inline-block？正如我所看到的結果幾乎一樣。在這種情況下，它們之間的區別究竟是什麼？

來源

2017-09-29 DunDev

的可能的複製[什麼是顯示器的區別： inline and display：inline-block？]（https://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block） – Maharkus

刪除'float：離開'並嘗試切換它們，你可以看到差異......好吧，這裏都產生相同的結果，我想這沒關係:) – kukkuz

@Maharkus這個問題不是你發佈的鏈接的重複。 OP似乎很熟悉兩者之間的區別，但並不理解他爲什麼不能看到代碼中的差異。看到我的答案，下面解決這個問題。 – kojow7

帶顯示的元素：內聯塊就像display：內聯元素，但它們可以有寬度和高度。這意味着您可以將內嵌塊元素用作塊，同時將其在文本或其他元素中進行流動。

差異的支持樣式作爲總結：

inline: only margin-left, margin-right, padding-left, padding-right 
inline-block: margin, padding, height, width

來源

2017-09-29 15:10:39 Solomon

你注意到沒有區別，因爲你申請的是風格，以一個孩子家長裏。

入住這裏，我已經把兩個環節同樣li內，發現

li a { 
    display: block;

和

li a { 
    display: inline-block;

Display: Block

Display: Inline-block

來源

2017-09-29 15:10:57

我懂了！：D非常感謝！ – DunDev

顯示器之間的差異：當您使用顯示塊

：塊李一您可以在另一方面有一個在一個立在一排

顯示：inline-block的 當您使用顯示：inline-block的到李一可以有多個在一個立在一排

來源

2017-09-29 15:15:01 tushgraph

的問題與其說是與你的a因素，因爲它與你的li元素。這是因爲a元素嵌套在您的li元素中。

您的li元素當前正在浮動到左側，因此會排成一排。您對a元素所做的任何更改只會影響元素在li元素內的顯示方式。在你的情況下，除非每個li內有多個a元素，否則它並沒有太大的區別。

如果你真的想看看事情如何改變，你會想要改變父li元素的顯示。因此，而不是下面的代碼：

li { 
    float: left; 
}

嘗試這兩個選項之一，看到了差距：

li { 
    display: block; 
}

或

li { 
    display: inline-block; 
}

來源

2017-09-29 15:15:10 kojow7

水平菜單的問題

回答

相關問題