web-dev-qa-db-fra.com

Se débarrasser des points de balle de <ul>

J'ai la liste suivante:

 <ul id="otis">
 <li>Benz</li>
 <li>Other Benz</li>
 <li>Other Other Benz</li>
 </ul>

Je veux me débarrasser des balles alors j'ai essayé:

 ul#otis {
 list-style-type: none;
 }

Cela n'a pas fonctionné bien. Quelle est la bonne façon de supprimer les puces de la liste affichée?

htmlhtml-lists
148
Sam Khan

En supposant que cela ne fonctionne pas, vous pouvez combiner le sélecteur basé sur id avec le li afin d'appliquer le css aux éléments li:

#otis li {
    list-style-type: none;
}

Référence:

181
David Thomas

J'avais moi-même le même problème extrêmement irritant puisque le script ne tenait pas compte de ma feuille de styels. Alors j'ai écrit:

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

Cela n'a pas fonctionné. Donc, en plus, j'ai écrit:

<li style="list-style-type: none;">

Voila! ça a marché!

26
John Olav

Le code suivant

#menu li{
  list-style-type: none;
}
<ul id="menu">
        <li>Root node 1</li>
        <li>Root node 2</li>
    </ul>

produira cette sortie:

output is

18
Kishan

Pour supprimer des puces des listes non ordonnées, vous pouvez utiliser:

list-style: none;

Vous pouvez aussi utiliser:

list-style-type: none;

Cela fonctionne mais le premier est un moyen plus rapide d’obtenir le même résultat.

17
Philpot

Essayez plutôt ceci, testé sur Chrome/Safari

ul {
 list-style: none;
}
15
Paul Kaplan

Pour supprimer la puce de UL vous pouvez simplement utiliser list-style: none; ou list-style-type: none; Si cela ne fonctionne toujours pas, alors je suppose qu'il y en a une question de priorité CSS. Peut être globalement UL déjà défini. Donc, le meilleur moyen d’ajouter une classe/ID à cette UL particulière et d’ajouter votre CSS ici. J'espère que ça va marcher.

4
Rokan Nashp

Mettre

<style type="text/css">
 ul#otis {
     list-style-type: none;
   }
</style>

juste avant la liste pour le tester. Ou

<ul style="list-style-type: none;">
4
Stuff

J'ai eu le même problème, et la façon dont j'ai finalement résolu le problème était la suivante:

ul, li{
    list-style:none;
    list-style-type:none;
}

C'est peut-être un peu extrême, mais quand j'ai fait ça, ça a fonctionné pour moi.

3
Braden Best

Cela a fonctionné parfaitement HTML

<ul id="top-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Process</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

CSS

#top-list{
  list-style-type: none;
  list-style: none;}
3
pokumars

Il doit y avoir autre chose.

Parce que:

   ul#otis {
     list-style-type: none;
   }

devrait juste travailler.

Il existe peut-être une règle CSS qui l’écrase.

Utilisez votre inspecteur DOM pour le savoir.

3
PeeHaa

pour la feuille de style en ligne essayez ce code

<ul style="list-style-type: none;">
    <li>Try This</li>
    </ul>
3
Luke

votre code:

ul#otis {
    list-style-type: none;
}

ma suggestion:

#otis {
    list-style-type: none;

}

en css, vous devez uniquement utiliser le #id pas element#id. des astuces plus utiles sont fournies ici: w3schools

1
Evan

J'ai eu un problème identique.

La solution a été que la puce a été ajoutée via un image de fond, PAS via le type liste-style. Un rapide "background: none" et Bob est ton oncle!

0
Ruskin