Aufzählungszeichen von <ul> entfernen

163

Ich habe die folgende Liste:

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

Ich möchte die Kugeln loswerden, also habe ich versucht:

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

Das hat aber nicht funktioniert. Wie können die Aufzählungszeichen ordnungsgemäß aus der angezeigten Liste entfernt werden?

html html-lists Sam Khan
quelle
1
Ihr aktuelles HTML / CSS funktioniert gut für mich in FF (JSFiddle). Welchen Browser verwenden Sie? Überprüfen Sie, ob list-style: nonestattdessen funktioniert.
Bojangles
1
Ich habe dies auf allen Browsern und Mac und Windows OS versucht. Ich benutze HTML5 Doctype ...
Sam Khan

Antworten:

197

Angenommen, dies hat nicht funktioniert, möchten Sie möglicherweise den idSelektor liauf Basis mit dem likombinieren , um das CSS auf die Elemente anzuwenden :

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

Referenz:

David sagt, Monica wieder einsetzen
quelle
Was ist der Unterschied zwischen ul#otisund #otis?
PeeHaa
Eigentlich gibt es keinen, ich habe den von idIhnen verwendeten Selektor einfach nicht gesehen . Ups, tut mir Leid!
David sagt, Monica
1
Wo auf diesem Link kann ich finden, dass es auf dem definiert werden muss li?
PeeHaa
Die ersten beiden Sätze: "Die list-style-typeCSS-Eigenschaft gibt das Erscheinungsbild eines Listenelementelements an. Da es das einzige ist, das standardmäßig verwendet wird display:list-item" (obwohl dies zulässt, dass es auf jedes Element mit einer Eigenschaft angewendet werden kanndisplay ). Obwohl sie es für ihr Beispiel unter dem olElement definieren. Persönlich definiere ich es immer standardmäßig sowohl für die Liste ( ul/ ol) als auch für die liElemente.
David sagt, Monica
27

Ich hatte selbst das gleiche extrem irritierende Problem, da das Skript mein Stylesheet nicht beachtete. Also schrieb ich:

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

Das hat nicht funktioniert. Also schrieb ich zusätzlich :

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

Voila! es funktionierte!

John Olav
quelle
20

Um Aufzählungszeichen aus ungeordneten Listen zu entfernen, können Sie Folgendes verwenden:

list-style: none;

Sie können auch verwenden:

list-style-type: none;

Beides funktioniert, aber der erste ist ein kürzerer Weg, um das gleiche Ergebnis zu erzielen.

Philpot
quelle
18

Der folgende Code 

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

wird diese Ausgabe erzeugen:

Ausgabe ist

Kishan
quelle
15

Versuchen Sie dies stattdessen, getestet auf Chrome / Safari

ul {
 list-style: none;
}
Paul Kaplan
quelle
4

Stellen 

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

unmittelbar vor der Liste zum Ausprobieren. Oder

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

Um Aufzählungszeichen zu entfernen UL, können Sie einfach verwenden list-style: none;oder list-style-type: none;Wenn es immer noch nicht funktioniert, gibt es vermutlich ein Problem mit CSS mit Priorität . Möglicherweise ist UL bereits global definiert. Fügen Sie also am besten eine Klasse / ID zu diesem bestimmten UL hinzu und fügen Sie dort Ihr CSS hinzu . Hoffe es wird funktionieren.

Rokan Nashp
quelle
4

Dies funktionierte perfekt 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
quelle
3

Es muss noch etwas anderes geben.

Weil:

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

sollte einfach funktionieren.

Vielleicht gibt es eine CSS-Regel, die sie überschreibt.

Verwenden Sie Ihren DOM-Inspektor, um dies herauszufinden.

PeeHaa
quelle
3

Ich hatte das gleiche Problem und die Art und Weise, wie ich es behoben habe, war wie folgt:

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

Vielleicht ist es ein bisschen extrem, aber als ich das tat, hat es für mich funktioniert.

Hoffe das hat geholfen

Braden Best
quelle
3

Versuchen Sie diesen Code für Inline-Stylesheets

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

dein Code:

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

mein Vorschlag:

#otis {
    list-style-type: none;

}

in css brauchen sie nur das #idnicht zu verwenden element#id. Weitere hilfreiche Hinweise finden Sie hier: w3schools

Evan
quelle
0

Ich hatte ein identisches Problem.

Die Lösung bestand darin, dass das Aufzählungszeichen über ein Hintergrundbild hinzugefügt wurde , NICHT über einen Listenstil. Ein kurzer 'Hintergrund: keine' und Bob ist dein Onkel!

Ruskin
quelle