27juin2008
Listes xhtml en colonne avec du CSS
Une technique pour mettre en colonne des listes xhtml.
Très utile pour la mise en page de formulaire ou pour afficher proprement une information sur la largeur de la page.
Code XHTML.
<ul>
<li>Valeur01</li>
<li>Valeur02</li>
<li>Valeur03</li>
<li>Valeur04</li>
<li>Valeur05</li>
<li>Valeur06</li>
<li>Valeur07</li>
<li>Valeur08</li>
<li>Valeur09</li>
<li>Valeur10</li>
</ul>
Code CSS
ul
{
width : 500px;
list-style-type : none;
}
li
{
width : 180px;
margin : 15px 0 0 0;
padding : 0 10px 0 0;
line-height : 15px;
float : left;
}
Exemple en ligne
Très utile pour la mise en page de formulaire ou pour afficher proprement une information sur la largeur de la page.
Code XHTML.
<ul>
<li>Valeur01</li>
<li>Valeur02</li>
<li>Valeur03</li>
<li>Valeur04</li>
<li>Valeur05</li>
<li>Valeur06</li>
<li>Valeur07</li>
<li>Valeur08</li>
<li>Valeur09</li>
<li>Valeur10</li>
</ul>
Code CSS
ul
{
width : 500px;
list-style-type : none;
}
li
{
width : 180px;
margin : 15px 0 0 0;
padding : 0 10px 0 0;
line-height : 15px;
float : left;
}
Exemple en ligne
Commentaires