Ich brauche eine ungeordnete Liste ohne Aufzählungszeichen

Ich habe eine ungeordnete Liste erstellt. Ich finde die Aufzählungszeichen in der ungeordneten Liste störend, deshalb möchte ich sie entfernen.

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

Sie können Kugeln entfernen , indem Sie die Einstellung , list-style-typeum noneauf dem CSS für das übergeordnete Element (typischerweise <ul>), zum Beispiel:

ul {
  list-style-type: none;
}

Möglicherweise möchten Sie auch hinzufügen padding: 0und hinzufügen margin: 0, wenn Sie auch Einrückungen entfernen möchten.

Im Listutorial finden Sie eine ausführliche Anleitung zu Listenformatierungstechniken.

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

Entfernen Sie den Standardlistenstil und das linke Auffüllen von Listenelementen (nur untergeordnete Elemente).

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

Sie müssen verwenden list-style: none;

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

Kleine Verfeinerung der vorherigen Antworten: Um längere Zeilen besser lesbar zu machen, wenn sie auf zusätzliche Bildschirmzeilen übertragen werden:

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

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

Wenn Sie es nicht auf der <ul>Ebene zum Laufen bringen können , müssen Sie möglicherweise Folgendes list-style-type: none;auf der <li>Ebene platzieren:

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

Verwenden Sie bei Bedarf !important:

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

Ich habe sowohl auf der ul als auch auf der li Listenstil verwendet, um die Kugeln zu entfernen. Ich wollte die Aufzählungszeichen durch ein benutzerdefiniertes Zeichen ersetzen, in diesem Fall einen "Strich". Das ergibt einen schön eingerückten Effekt, der funktioniert, wenn der Text umbrochen wird.

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>

So entfernen Sie den ulStandardstil vollständig :

    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;

Wenn Sie dies nur mit reinem HTML erreichen möchten, 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>

Dadurch wird eine Liste erstellt, die der folgenden ähnelt:

List Item 1
     Sub-Item 1.1
List Item 2
     Sub-Item 2.1
     Sub-Item 2.2
     Sub-Item 2.3
List Item 3
     Sub-Item 3.1

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

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

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

li {
    display: block;
}

Wenn Sie ein vorhandenes Thema entwickeln, hat das Thema möglicherweise einen benutzerdefinierten Listenstil.

Wenn Sie den Listenstil nicht mit ul- list-style: none;oder li-Tags ändern können, wenden Sie sich zuerst an, !importantda möglicherweise eine andere Stilzeile Ihren Stil überschreibt.

Wenn dies nicht der Fall ist, überprüfen li:beforeSie, ob der Inhalt vorhanden ist. dann mach:

li:before { dispaly: none; }

 <div class="custom-control custom-checkbox left">
    <ul class="list-unstyled">
        <li>
         <label class="btn btn-secondary text-left" style="width:100%;text-align:left;padding:2px;">
           <input type="checkbox" style="zoom:1.7;vertical-align:bottom;" asp-for="@Model[i].IsChecked" class="custom-control-input" /> @Model[i].Title
         </label>
        </li>
     </ul>
</div>

Ich habe versucht und beobachtet:

header ul {
   margin: 0;
   padding: 0;
}

Für den Fall, dass Sie die Dinge einfach halten möchten, ohne auf CSS zurückzugreifen, füge ich einfach ein  in meine Codezeilen ein. Dh <table></table>.

Ja, es bleiben ein paar Leerzeichen, aber das ist keine schlechte Sache.