Comment supprimer les puces de liste en CSS

Par défaut, la balise <ul> de liste non ordonnée en HTML crée une liste d'éléments précédés d'une puce ronde. Dans certaines situations, vous pouvez vouloir supprimer les puces — par exemple, si vous souhaitez conserver la mise en page épurée de la liste sans la distraction des puces, ou si vous utilisez <ul> pour générer un menu déroulant. Pour ce faire, utilisez l'attribut de style CSS list-style-type, qui fait partie des spécifications CSS depuis la première version.

Étape 1

Ouvrez le fichier .html ou .htm qui contient la liste non ordonnée dont vous voulez supprimer les puces. Utilisez un éditeur de texte brut, comme le Bloc-notes, pour éviter d'introduire des erreurs dans le code HTML.

Étape 2

Faites défiler jusqu'au code qui commence la liste non ordonnée, qui sera marqué par une balise <ul>.

Ajoutez le code suivant après ul et avant > :

style="list-style-type: none;"

Le code devrait maintenant ressembler à ceci :

<ul style="list-style-type:none">

Étape 3

Enregistrez le fichier HTML et fermez l'éditeur de texte. Ouvrez le fichier HTML dans votre navigateur web pour vérifier que les puces ont été supprimées de la page web.

Astuce

Si vous voulez supprimer les puces de toutes les listes non ordonnées de la page, vous pouvez ajouter la ligne de code suivante entre les balises <head> et </head> dans le code source HTML : <style> ul { list-style-type: none; } </style>.