Probleme mit horizontalem Menü

Question

Ich habe einige Probleme bei dem Versuch, den Unterschied zwischen display: block und display: inline-block im Beispiel des horizontalen Menüs zu unterscheiden.

Meine Geige: https://jsfiddle.net/4dg0ukk6/

Die folgenden Codezeilen aus der Geige Link extrahiert oben

erwähnt

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

Sollte ich display: block oder display: inline-block verwenden? Wie ich sehe, ist das Ergebnis fast das Gleiche. Was ist der Unterschied zwischen ihnen in diesem Fall?

Answer 1

Elemente mit Anzeige: Inline-Block sind wie Anzeige: Inline-Elemente, aber sie können eine Breite und eine Höhe haben. Das bedeutet, dass Sie ein Inline-Block-Element als Block verwenden können, während Sie es in Text oder anderen Elementen fließen lassen.

Unterschied der unterstützten Stile als Zusammenfassung:

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

Answer 2

Man merkt keinen Unterschied, weil Sie diesen Stil auf ein einzelnes Kind in einem Elternteil sich bewerben.

prüfen, habe ich in der gleichen li zwei Links setzen, beachten Sie den Unterschied zwischen

li a { 
    display: block; 

und

li a { 
    display: inline-block; 

Display: Block

Display: Inline-block

Answer 3

Anzeige Block

Wenn Sie Anzeige verwenden: Block li a Sie ein in eine li in einer Reihe

in anderen

Anzeige haben: inline-block Wenn Sie verwenden Anzeige: Inline-Block zu Li a Sie können mehrere in einem Li in einer Zeile haben

Answer 4

Das Problem ist nicht so sehr mit Ihrem a Element als es ist mit Ihrem li Element. Dies liegt daran, dass die a Elemente innerhalb Ihrer li Elemente verschachtelt sind.

Ihre li Elemente werden derzeit nach links verschoben, sodass sie nebeneinander ausgerichtet sind. Alle Änderungen, die Sie an den Elementen a vornehmen, wirken sich nur auf die Darstellung innerhalb des Elements li aus. In Ihrem Fall macht es keinen großen Unterschied, es sei denn, Sie haben mehr als ein a Element in jedem li.

Wenn Sie wirklich sehen möchten, wie sich die Dinge ändern, werden Sie die Anzeige der übergeordneten Elemente ändern müssen li.Anstatt also den folgenden Code:

li { 
    float: left; 
} 

versuchen, eine dieser beiden Optionen, um den Unterschied zu sehen:

li { 
    display: block; 
} 

oder

li { 
    display: inline-block; 
}