In einigen Situationen möchten Sie möglicherweise eine Aufzählungsliste ohne Aufzählungszeichen oder Listenelemente ohne Aufzählungszeichen erstellen. Führen Sie die folgenden Schritte aus, um eine geordnete Liste oder eine ungeordnete Liste ohne Aufzählungszeichen zu erstellen.
HTML-Beispiel
Durch Hinzufügen der CSS-Klasse „list-style: none“ zum Tag für ungeordnete Listen (
- ) oder geordnete Listen (
- ) anwenden, um Aufzählungszeichen von einigen zu entfernen, während die anderen Aufzählungszeichen unverändert bleiben.
- Listenelement ohne Aufzählungszeichen
- Zweiter Artikel
- ) werden alle Aufzählungszeichen oder Zahlen entfernt.
<ul style="list-style: none;"> <li>List item with no bullet</li> <li>Second item</li> </ul>
HTML mit CSS-Beispiel
Obwohl das obige Beispiel in fast jeder Situation funktioniert, ist es besser, das CSS in einer separaten, externen Datei zu haben. Unten ist das CSS und HTML, das Aufzählungszeichen entfernt.
Die Verwendung des folgenden CSS entfernt Aufzählungszeichen aus allen ungeordneten Links (
- ). Dieses CSS kann nützlich sein, wenn Sie keine Aufzählungszeichen verwenden möchten oder ein Bild anstelle eines Aufzählungszeichens verwenden möchten.
<style type="text/css"> ul { list-style-type: none; } </style>
Wenn Sie nur eine Liste haben möchten, keine Aufzählungszeichen oder Zahlen, ist es eine bessere Idee, eine Klasse zu erstellen, die immer dann verwendet wird, wenn Sie keine Aufzählungszeichen möchten:
<style type="text/css"> .nobull { list-style-type: none; } </style>
Im obigen CSS wird eine neue Klasse namens “nobull” erstellt. Diese Klasse kann dann jederzeit verwendet werden, wenn Sie kein Aufzählungszeichen wünschen, wie im folgenden Beispiel gezeigt.
<ul class="nobull"> <li>List item with no bullet</li> <li>Second item</li> </ul>
Sie können diese Klasse auch auf alle Listenelemente (
Beispielausgabe
Unten sehen Sie ein Beispiel dafür, wie die Ausgabe für eine ungeordnete Aufzählungsliste ohne Aufzählungszeichen angezeigt wird.