CSS Layout - zobrazení: inline-block
Displej: Inline-block Value
Oproti display: inline, hlavní rozdíl je v tom, že display: inline-blockumožňuje nastavit šířku a výšku prvku.
Také s
display: inline-block, horní a dolní okraje / odsazení jsou respektovány, ale s display: inlinene.
Oproti display: block, hlavní rozdíl je v tom, že display: inline-blockza prvek nepřidává zalomení řádku, takže prvek může sedět vedle jiných prvků.
Následující příklad ukazuje různé chování display: inline, display: inline-block
a display: block:
Příklad
span.a {
display: inline; /* the default for 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;
}
Použití inline-block k vytvoření navigačních odkazů
Jedním z běžných způsobů použití display: inline-block
je zobrazení položek seznamu vodorovně místo svisle. Následující příklad vytváří horizontální navigační odkazy:
Příklad
.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;
}