CSS Layout - display: inline-block

display: inline-block

jämfört med display: inline jämfört med display: inline-block Tillåter att bredd och höjd sätts på elementet.

På samma sätt, om display: inline-block är inställt, kommer övre/lower marginaler/marginaler att behållas, medan display: inline inte kommer att göra det.

Jämfört med display: block, den främsta skillnaden är att display: inline-block inte lägger till en radbrytning efter elementet, så att elementet kan placeras bredvid andra element.

Nedan visas ett exempel på skillnaden i beteende mellan display: inline, display: inline-block och display: block:

Exempel

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; 
{}

Prova själv

Använd inline-block för att skapa navigeringslänkar

En vanlig användning av display:inline-block Används för att visa listobjekt horisontellt istället för vertikalt. Exemplet skapar en horisontell navigeringslänk:

Exempel

.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;
{}

Prova själv