CSS-Layout - display: inline-block

display: inline-block

im Vergleich zu display: inline im Vergleich dazu gibt es den Hauptunterschied darin, dass display: inline-block Es ist erlaubt, Breite und Höhe auf dem Element zu setzen.

Ebenso wird, wenn display: inline-block gesetzt ist, der obere und untere Außenabstand sowie der Innenabstand beibehalten, während display: inline dies nicht tut.

Im Vergleich zu display: block gibt es den Hauptunterschied darin, dass display: inline-block nach dem Element keine Zeilenumbruch hinzufügt, sodass das Element neben anderen Elementen stehen kann.

Hier wird gezeigt, wie sich die verschiedenen Verhaltensweisen von display: inline, display: inline-block und display: block unterscheiden:

Beispiel

span.a {
  display: inline; /* span 的默认值 */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}
span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}
span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}

Versuchen Sie es selbst

Verwenden Sie inline-block, um Navigationslinks zu erstellen

Eine häufige Anwendung von display:inline-block Verwendet horizontal anstatt vertikal, um Listeinträge anzuzeigen. Das folgende Beispiel erstellt einen horizontalen Navigationslink:

Beispiel

.nav {
  background-color: yellow; 
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}
.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

Versuchen Sie es selbst