Comment aligner une liste à puces en HTML
Les concepteurs Web utilisent des listes à puces pour plus que simplement ajouter des puces et du texte. La balise HTML utilisée pour créer des listes à puces est pratique pour créer des menus ou organiser des images pour un JavaScript à charger dans un diaporama. Apprendre à utiliser le code de feuille de style en cascade en conjonction avec des listes à puces - appelées "listes non ordonnées" dans l'argot HTML - ouvrira plusieurs possibilités passionnantes de conception Web.
Étape 1
Ouvrez votre fichier HTML contenant la liste à puces et regardez entre les
et balises vers le haut du code. Ajoutez des balises si elles ne sont pas déjà présentes. Si votre code inclut une balise quelque part après le balise et qui contient une référence à un fichier CSS, puis ouvrez ce fichier à la place. Votre code CSS se place entre les balises 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
- . La balise
- et balises pour les définir comme faisant partie d'une seule liste. Lorsque vous alignez du texte pour la balise
- Élément de liste
- Élément de liste
- entoure le
- , l'alignement affecte le texte de chaque puce mais n'aligne pas la liste elle-même à gauche ou à droite de la page. Voici un exemple de code CSS pour définir "text-align":
ul {text-align:right;}
Notez que les puces ne se déplacent pas avec le texte. Les balles restent à gauche dans ce cas.
Étape 3
Alignez toute la liste à gauche ou à droite de la page en définissant "float" pour votre balise
- . Lorsque "float" est défini sur gauche ou droite sur une balise
- , il déplace toute la liste à puces vers la gauche ou la droite de la page. Définissez le flotteur comme ceci :
ul {float :droite ; }
Vous pouvez définir "flotteur" à gauche ou à droite, mais pas au centre.
Étape 4
Enveloppez vos balises
- dans et balises pour créer un wrapper qui centrera la liste à puces sur votre page. Votre code résultant ressemblera à ceci :
La balise ne centre rien par elle-même ; vous devez utiliser CSS pour tout centrer. Ajoutez le code suivant entre vos balises