CSS display: inline-block
La propriété CSS display: inline-block
La propriété display: inline-block combine les caractéristiques des éléments en ligne et des éléments de bloc.
Un élément avec display: inline-block apparaîtra sur la même ligne que d'autres éléments en ligne ou en ligne-bloc. De plus, vous pouvez définir les propriétés width , height , margin-top , et margin-bottom pour cet élément (comme pour les éléments de bloc).
L'exemple suivant montre le comportement différent de display: inline , display: inline-block et display: block :
Exemple
span.a {
display: inline; /* la valeur par défaut pour span */
padding: 5px;
border: 2px solid red;
}
span.b {
display: inline-block;
width: 100px;
height: 35px;
padding: 5px;
border: 2px solid red;
}
span.c {
display: block;
width: 100px;
height: 35px;
padding: 5px;
border: 2px solid red;
} Créer un menu de navigation horizontal
Une utilisation courante de display: inline-block est d'afficher les éléments de liste horizontalement plutôt que verticalement. L'exemple suivant crée un menu de navigation horizontal :
Exemple
Créez un menu de navigation horizontal :
.nav {
background-color: lightgray;
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 18px;
padding: 15px;
} Propriété CSS
| Propriété | Description |
|---|---|
| display | Spécifie le comportement d'affichage (le type de boîte de rendu) d'un élément |