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
la 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

Réponses:

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:

David dit de réintégrer Monica
la 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
la 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
la 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
la source
15

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

ul {
 list-style: none;
}
Paul Kaplan
la 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
la 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
la 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
la 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
la 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
la source
3

pour la feuille de style en ligne, essayez ce code

<ul style="list-style-type: none;">
    <li>Try This</li>
    </ul>
Luke
la 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
la 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
la source