Comment aligner une liste à puces en HTML/CSS

Les concepteurs web utilisent les listes à puces pour plus que des puces et du texte. La balise HTML pour créer ces listes (appelées "listes non ordonnées") est pratique pour créer des menus ou organiser des images pour un diaporama JavaScript. Apprendre à utiliser le CSS avec les listes à puces ouvre de nombreuses possibilités de design web.

Étape 1

Ouvrez votre fichier HTML contenant la liste à puces et regardez entre les balises <head> et </head> en haut du code. Ajoutez les balises <style> si absentes. Si votre code inclut une balise <link> après <head> référençant un fichier CSS, ouvrez ce fichier à la place. Votre code CSS va entre les balises <style> ou sur une nouvelle ligne de votre fichier CSS.

Étape 2

Alignez le texte dans toutes les puces en définissant text-align pour votre balise <ul>. La balise <ul> enveloppe les balises <li> et </li> pour les définir comme une seule liste. Quand vous alignez le texte pour <ul>, l'alignement affecte le texte de chaque puce mais n'aligne pas la liste elle-même à gauche ou droite de la page. Exemple de code CSS :

ul {text-align: right;}

Notez que les puces ne bougent pas avec le texte ; elles restent à gauche dans ce cas.

Étape 3

Alignez toute la liste à gauche ou droite de la page en définissant float pour votre balise <ul>. Quand float est à left ou right sur <ul>, cela déplace toute la liste à gauche ou droite. Définissez float ainsi :

ul {float: right;}

Vous pouvez mettre float à left ou right, mais pas au centre.

Étape 4

Enveloppez vos balises <ul> dans des balises <div> pour créer un conteneur qui centrera la liste. Votre code ressemblera à :

<div>
  <ul>
    <li>Élément</li>
    <li>Élément</li>
  </ul>
</div>

La balise <div> ne centre rien par elle-même ; il faut du CSS. Ajoutez ce code entre vos balises <style> ou dans votre fichier CSS :

div {display: block; text-align: center;}
ul {display: inline-block; text-align: left;}

Astuce

Utilisez le CSS sur les listes à puces pour créer des menus. Mettre <li> en float left les aligne côte à côte, et list-style: none sur <ul> cache les puces. Ensuite, stylisez avec couleurs et espacements selon votre design.