Ich brauche eine ungeordnete Liste ohne Aufzählungszeichen

Question

Ich habe eine unsortierte Liste erstellt. Ich empfinde die Aufzählungszeichen in der ungeordneten Liste als störend und möchte sie daher entfernen.

Ist es möglich, eine Liste ohne Aufzählungszeichen zu erstellen?

Answer 1

Sie können Aufzählungszeichen entfernen, indem Sie die Option list-style-type a none auf das CSS für das übergeordnete Element (typischerweise ein <ul> ), zum Beispiel:

ul {
  list-style-type: none;
}

Sie können auch Folgendes hinzufügen padding: 0 y margin: 0 wenn Sie auch die Einrückung entfernen wollen.

Voir Listutorial für eine großartige Übersicht über Listenformatierungstechniken.

Answer 2

Wenn Sie Bootstrap verwenden, gibt es eine "unstyled"-Klasse:

Entfernen Sie den Standard-Listenstil und die linke Auffüllung von Listenelementen (nur unmittelbare Kinder).

Bootstrap 2:

<ul class="unstyled">
   <li>...</li>
</ul>

http://twitter.github.io/bootstrap/base-css.html#typography

Bootstrap 3 und 4:

<ul class="list-unstyled">
   <li>...</li>
</ul>

Bootstrap 3: http://getbootstrap.com/css/#type-lists

Bootstrap 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled

Bootstrap 5: https://getbootstrap.com/docs/5.0/content/typography/#unstyled

Answer 3

Sie müssen Folgendes verwenden list-style: none;

<ul style="list-style: none;">
    <li>...</li>
</ul>

Answer 4

Kleine Verfeinerung der vorherigen Antworten: Um längere Zeilen besser lesbar zu machen, wenn sie sich auf weitere Bildschirmzeilen ausdehnen:

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

li {padding-left: 2em; text-indent: -2em;}

Answer 5

Wenn Sie nicht in der Lage sind, es am <ul> Ebene, müssen Sie möglicherweise die list-style-type: none; am <li> Ebene:

<ul>
    <li style="list-style-type: none;">Item 1</li>
    <li style="list-style-type: none;">Item 2</li>
</ul>

Sie können eine CSS-Klasse erstellen, um diese Wiederholungen zu vermeiden:

<style>
ul.no-bullets li
{
    list-style-type: none;
}
</style>

<ul class="no-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Wenn nötig, verwenden Sie !important :

<style>
ul.no-bullets li
{
    list-style-type: none !important;
}
</style>