Se débarrasser des puces de <ul>

163

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é cependant. Quelle est la bonne façon de supprimer les puces de la liste affichée?

html html-lists

— Sam Khan
source

1

Votre HTML / CSS actuel fonctionne très bien pour moi dans FF (JSFiddle). Quel navigateur utilisez-vous? Voyez si cela list-style: nonefonctionne à la place.

— Bojangles

1

J'ai essayé ceci sur tous les navigateurs et Mac et Windows OS. J'utilise html5 doctype ...

— Sam Khan

197

En supposant que cela ne fonctionne pas, vous voudrez peut-être combiner le idsélecteur basé sur le lipour appliquer le css aux liéléments:

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

Référence:

list-style-typeau Mozilla Developer Center .

— David dit de réintégrer Monica
source

Quelle est la différence de faire ul#otiset #otis?

— PeeHaa

En fait, il n'y en a pas, je, euh, je n'ai pas réussi à voir le idsélecteur que vous avez utilisé. Oops désolé!

— David dit de réintégrer Monica

1

où sur ce lien puis-je trouver qu'il doit être défini sur le li?

— PeeHaa

Les deux premières phrases: "La list-style-typepropriété CSS spécifie l'apparence d'un élément d'élément de liste. Comme c'est le seul qui utilise par défaut display:list-item" (bien qu'elle permette qu'elle puisse s'appliquer à n'importe quel élément avec une displaypropriété). Bien qu'ils le définissent, pour leur exemple, sous l' olélément. Personnellement, je le définis toujours par défaut pour la liste ( ul/ ol) et les liéléments.

— David dit de réintégrer Monica

27

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

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

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

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

Voila! ça a marché!

— John Olav
source

20

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

list-style: none;

Vous pouvez aussi utiliser:

list-style-type: none;

Les deux fonctionnent mais le premier est un moyen plus court d'obtenir le même résultat.

— Philpot
source

19

Le code suivant

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

<ul id="menu">
    <li>Root node 1</li>
    <li>Root node 2</li>
</ul>

Développer l'extrait

produira cette sortie:

la sortie est

— Kishan
source

15

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

ul {
 list-style: none;
}

— Paul Kaplan
source

4

Mettre

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

juste avant la liste pour la tester. Ou

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

— Des trucs
source

4

Pour supprimer la puce, ULvous pouvez simplement utiliser list-style: none;ou list-style-type: none;Si cela ne fonctionne toujours pas, je suppose qu'il y a un problème de priorité CSS . Peut être globalement UL déjà défini. La meilleure façon donc d'ajouter une classe / ID à cet UL particulier et d'y ajouter votre CSS . J'espère que cela fonctionnera.

— Rokan Nashp
source

4

Cela fonctionnait 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;}

— Pokumars
source

3

Il doit y avoir autre chose.

Car:

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

devrait juste fonctionner.

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

Utilisez votre inspecteur DOM pour le découvrir.

— PeeHaa
source

3

J'ai eu le même problème, et la façon dont j'ai fini par le résoudre était comme ceci:

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 marché pour moi.

J'espère que cela a aidé

— Braden Best
source

3

pour la feuille de style en ligne, essayez ce code

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

— Luke
source

1

votre code:

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

ma suggestion:

#otis {
    list-style-type: none;

}

en css, vous devez uniquement utiliser le #idnot element#id. des conseils plus utiles sont fournis ici: w3schools

— Evan
source

0

J'ai eu un problème identique.

La solution était que la puce était ajoutée via une image d'arrière - plan , PAS via un type de liste. Un bref «arrière-plan: aucun» et Bob est votre oncle!

— Ruskin
source