ການປ່ຽນການຫຼັງຄຳຂຽນ CSS

display: inline-block

ທຽບກັບ display: inline ທຽບກັບ display: inline-block ອະນຸຍາດຕັ້ງຂະໜາດທີ່ສູງ/ມວນສະໜາມໃນສິ່ງ.

ຢ່າງດຽວກັນ, ຖ້າການກະກຽມ display: inline-block, ຈະຖືກກັກຂັງຂອງຂ້າງຂອງບາງລະດັບຕົວເລກພາຍໃນຂອງສິ່ງທີ່ມີ display: inline ບໍ່ຈະຖືກກັກຂັງ.

ທຽບກັບ display: block, ຄວາມແຕກຕ່າງຫຼັກແມ່ນ display: inline-block ບໍ່ພັດທະນາສິ່ງຫົວໃນສິ່ງຫຼັງ, ແລະ ສິ່ງນີ້ສາມາດຢູ່ທິດພາຍໃນສິ່ງອື່ນ.

ຄວາມສະແດງກ່າວ: display: inline、display: inline-block ແລະ display: block ທີ່ມີພາລະກິດທີ່ແຕກຕ່າງກັນ:

Example

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

Try It Yourself

Using inline-block to create navigation links

A common use of display:inline-block Used to display list items horizontally instead of vertically. The following example creates a horizontal navigation link:

Example

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

Try It Yourself