Utilisez le code CSS pour aligner les listes à puces en HTML.
Les concepteurs de sites 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" en argot HTML - ouvrira plusieurs possibilités passionnantes de conception Web.
Étape 1
Ouvrez votre fichier HTML contenant la liste à puces et regardez entre les balises et vers le haut du code. Ajoutez des balises si elles ne sont pas déjà présentes. Si votre code comprend un tag quelque part après le tag, et que contient une référence à un fichier CSS, puis ouvrez ce fichier à la place. Votre code CSS passe entre les balises ou sur une nouvelle ligne de votre fichier CSS.
Vidéo du jour
Étape 2
Alignez le texte dans toutes les puces en définissant "text-align" pour votre
- étiqueter. le
- et balises pour les définir dans le cadre d'une liste unique. Lorsque vous alignez du texte pour le
- l'étiquette s'enroule autour du
- balise, l'alignement affecte le texte dans 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 « flotter » pour votre
- étiqueter. Lorsque « flotter » est réglé sur la gauche ou la droite sur un
- balise, il déplace toute la liste à puces vers la gauche ou la droite de la page. Définissez le flotteur comme ceci:
ul {flotter: à droite ;}
Vous pouvez définir « flotter » à gauche ou à droite, mais pas au centre.
Étape 4
Enveloppez votre
- balises dans
et
balises pour créer un wrapper qui centrera la liste à puces sur votre page. Votre code résultant ressemblera à ceci:- Élément de liste
- Élément de liste
le
la balise ne centre rien par elle-même; vous devez utiliser CSS pour tout centrer. Ajoutez le code suivant entre votre
