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

Ich habe list-style sowohl auf der ul als auch auf der li, um die Aufzählungszeichen zu entfernen. Ich wollte die Aufzählungszeichen durch ein benutzerdefiniertes Zeichen ersetzen, in diesem Fall einen "Bindestrich". Das ergibt einen schön eingerückten Effekt, der gut funktioniert, wenn der Text umbricht.

ul.dashed-list {
    list-style: none outside none;
}

ul.dashed-list li:before {
    content: "\2014";
    float: left;
    margin: 0 0 0 -27px;
    padding: 0;
}

ul.dashed-list li {
    list-style-type: none;
}

<ul class="dashed-list">
  <li>text</li>
  <li>text</li>
</ul>

Answer 2

Wenn Sie dies mit folgenden Mitteln erreichen wollten rein HTML allein, funktioniert diese Lösung in allen gängigen Browsern:

Beschreibung Listen

Verwenden Sie einfach den folgenden HTML-Code:

    <dl>
      <dt>List Item 1</dt>
        <dd>Sub-Item 1.1</dd>
      <dt>List Item 2</dt>
        <dd>Sub-Item 2.1</dd>
        <dd>Sub-Item 2.2</dd>
        <dd>Sub-Item 2.3</dd>
      <dt>List Item 3</dt>
        <dd>Sub-Item 3.1</dd>
    </dl>

Beispiel hier: https://jsfiddle.net/zumcmvma/2/

Referenz hier: https://www.w3schools.com/tags/tag_dl.asp

Answer 3

Damit wird eine Liste vertikal ohne Aufzählungszeichen angeordnet. In nur einer Zeile!

li {
    display: block;
}

Answer 4

Zum vollständigen Entfernen der ul Standard-Stil:

    list-style-type: none;

    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;

Answer 5

Wenn Sie ein bestehendes Thema entwickeln, ist es möglich, dass das Thema einen eigenen Listenstil hat.

Wenn Sie also den Listenstil nicht mit list-style: none; in ul- oder li-Tags, überprüfen Sie zunächst mit !important denn vielleicht überschreibt eine andere Stilzeile Ihren Stil. Wenn !important behoben haben, sollten Sie einen spezifischeren Selektor finden und die !important .

li {
    list-style: none !important;
}

Wenn dies nicht der Fall ist, überprüfen Sie die li:before . Wenn es den Inhalt enthält, dann ja:

li:before {
    display: none;
}