Contenu
Les concepteurs Web utilisent des listes "non ordonnées" ou "signets" pour plus que l'ajout de signets et de texte. La balise HTML utilisée pour créer des listes non ordonnées est utile pour créer des menus et organiser des images pour un code JavaScript à charger dans une présentation. Apprendre à utiliser CSS (feuille de style en cascade) avec ces listes ouvrira de nombreuses possibilités de conception Web. Aligner des listes non ordonnées est une compétence très importante à améliorer.
Les instructions
-
Ouvrez le fichier HTML contenant la liste non ordonnée et parcourez les balises et , en haut du code. Ajouter des tags> et s'ils ne sont pas déjà présents. Si votre code comprend une balise
- quelque part après, et contenant une référence à un fichier CSS, ouvrez ce fichier. Votre code CSS ira entre les> et ou dans une nouvelle ligne de votre fichier CSS.
-
Alignez le texte dans les signets en définissant la propriété "text-align" de votre tag
- . Cela implique les balises
- et pour les définir dans le cadre d'une liste unique. Lorsque vous alignez le texte dans la balise
- , tous les éléments de la liste seront affectés, mais pas la liste elle-même, à gauche ou à droite de la page. Exemple d'utilisation de code CSS pour définir la propriété "text-align", utilisez "ul {text-align: right;}". Notez que les marqueurs ne bougeront pas avec le texte. Dans ce cas, ils seront à gauche.
-
Alignez toute la liste à gauche ou à droite de la page en définissant la propriété "float" de votre tag
- . Cette propriété affecte toute la liste en la déplaçant vers la gauche ou la droite de la page. Écrivez le code "ul {float: right;}".
Vous pouvez définir cette propriété à gauche ou à droite, mais pas au centre.
-
Enveloppez vos tags
- avec des balises et pour créer une enveloppe qui va centrer la liste sur la page. Le code ressemblera à ceci: "
- Élément de liste
- Élément de liste
La balise n'alignera rien par elle-même; vous devriez utiliser CSS pour tout centrer. Ajoutez le code suivant entre les balises> ou dans votre fichier CSS pour centrer la liste: "div {display: bloc; text-align: centre;} ul {display: inline-block; text-align: left;}".