display: inline-block Layout Latar Belakang

pameran: inline-block

dibandingkan pameran: inline dibandingkan, perbezaan utama adalah pameran: inline-block Memungkinkan untuk menetapkan lebar dan tinggi elemen.

Demikian pula, jika diatur pameran: inline-block, marjin atas/bawah serta marjin dalaman akan dikekalkan, manakala pameran: inline tidak akan.

Dibandingkan dengan pameran: block, perbezaan utama adalah pameran: inline-block tidak menambahkan garis baharuan selepas elemen, jadi elemen ini boleh berada di sebelah lainnya.

Contoh berikut menunjukkan perbezaan tingkah laku display: inline, display: inline-block serta display: block:

实例

span.a {
  pameran: inline; /* nilai baku span */
  lebar: 100px;
  tinggi: 100px;
  keluarkan: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}
span.b {
  display: inline-block;
  lebar: 100px;
  tinggi: 100px;
  keluarkan: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}
span.c {
  pameran: block;
  lebar: 100px;
  tinggi: 100px;
  keluarkan: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}

亲自试一试

使用 inline-block 创建导航链接

用法常见的一种 display：inline-block 用于水平而不是垂直地显示列表项。下例创建了一个水平导航链接：

实例

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

亲自试一试