Mfumo wa tovuti wa CSS - display: inline-block

display: inline-block

Na display: inline Tofauti kubwa inaongoza display: inline-block Inaruhusiwa kumekadiri nguzo na kipimo cha elementi.

Kwa sasa, kama inasajiliwa display: inline-block, hata hivyo itakaa mawingu ya kuelekea juu/kitu kuelekea nje, hali inayotaka display: inline siwezi kuzingatia mawingu hiyo.

Kwa sasa, tofauti kubwa inaongoza display: inline-block hali inayofikia kiwango cha kipindi cha kuzingatia matukio mengine, kwa hivyo elementi hauweza kuwa na mawingu ya kuelekea chini kwa sababu hauweza kuwa na mawingu ya kuelekea nje au nje.

Mfanyiko wa inaonyesha display: inline, display: inline-block na display: block kwa matukio tofauti tofauti:

Mfano

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

Jifunze Kwa Kupanua

Kuongeza viungo vya navigation kwa sababu ya inline-block

Kuongeza display ni kawaida:inline-block Kuonyesha orodha kwa ukweli wa mabaki kwa sababu ya hali ya mabaki. Mfano huu huzungumza kuhusu ukionyesha viungo vya navigation kwa ukweli wa mabaki:

Mfano

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

Jifunze Kwa Kupanua