CSS အချက် - display: inline-block

display: inline-block

နှင့် display: inline နှင့် နှိုင်းယှဉ်လျှင် အခြားကဲ့သို့ display: inline-block အအုံ/အဆိုပါ အအုံ အရွယ် အား အကိုင်းအချုပ် ပြုပြင်ထားနိုင်သည်。

တူညီသောပုံမျှဖြစ်ပေမဲ့ display: inline-block သည် အောက်ပါ အပြွန်း/အဆိုပါ အပြွန်း ကို ကျန်ရှိစေသည်၊ သို့သော် display: inline သည် မပြောင်းလဲဘဲ ဖြစ်သည်。

display: block နှင့် နှိုင်းယှဉ်လျှင် အခြားကဲ့သို့ display: inline-block သည် အအုံအပြွန်း သို့ ပြောင်းလဲသော ချက်မရှိဘဲ ဖြစ်သည်၊ အကြောင်းကြောင်း display: inline-block သည် အအုံအပြွန်း နှင့် အဆိုပါ အအုံအပြွန်း တစ်ခု အပြင်ဘက် နေရန် အတွက် အချက်အလက်ဖြစ်သည်。

အောက်ပါ ပြသမှုတွင် display: inline, display: inline-block နှင့် display: block အကြား မတူညီမှုများ ပြုပြင်ထားပါသည်:

实例

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

亲自试一试

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

亲自试一试