Frage Brauchen Sie eine ungeordnete Liste ohne irgendwelche Kugeln


Ich habe eine ungeordnete Liste erstellt. Ich finde die Kugeln in der ungeordneten Liste sind lästig, also möchte ich sie entfernen.

Ist es möglich, eine Liste ohne Kugeln zu haben?


2039
2018-06-22 13:57


Ursprung


Antworten:


Sie können Kugeln entfernen, indem Sie die Option list-style-type zu none im CSS für das Elternelement (normalerweise a <ul>), beispielsweise:

ul {
  list-style-type: none;
}

Vielleicht möchten Sie auch hinzufügen padding: 0 und margin: 0 dazu, wenn Sie auch den Einzug entfernen möchten.

Sehen Listutorial für eine großartige Komplettlösung von Listenformatierungstechniken.


3031
2018-06-22 14:00



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

Entfernen Sie den Standard-Listenstil und den linken Abstand für Listenelemente (nur untergeordnete Elemente).

Bootstrap 2:

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

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

Bootstrap 3 und 4:

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

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


466
2017-07-11 15:05



Sie müssen verwenden list-style: none;

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

183
2018-06-22 14:00



in CSS, Stil,

 list-style-type: none;

49
2018-06-22 14:00



Du müsstest dem Stil einen Stil hinzufügen <ul> Element wie das Folgende:

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

Das wird die Kugeln entfernen. Sie können das CSS auch in einem Stylesheet wie in den obigen Beispielen hinzufügen.


43
2018-06-22 14:02



in css ...

ul {
   list-style:none;
}

41
2018-06-22 14:00



Kleine Verfeinerung zu den oben genannten: Um längere Zeilen lesbarer zu machen, wenn sie auf zusätzliche Bildschirmzeilen übergreifen:

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

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

34
2017-12-10 05:55



Verwenden Sie das folgende CSS:

ul {
  list-style-type: none
}

34
2018-06-22 14:00



Muttersprache:

ul { list-style-type: none; }

Bootstrap:

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

Hinweis: Wenn Sie Listengruppen verwenden, müssen Sie keine Liste erstellen.


17
2018-05-14 21:23



Ich benutzte List-Stil sowohl auf der UL als auch auf der li, um die Kugeln zu entfernen. Ich wollte die Kugeln durch einen benutzerdefinierten Charakter ersetzen, in diesem Fall einen "Strich", der einen schönen Effekt ergibt. Also benutze dieses Markup:

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

mit diesem css:

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;
}

gibt einen schön eingerückten Effekt, der funktioniert, wenn der Text umbrochen wird


13
2017-09-17 04:52



Wenn du es nicht schaffen kannst, funktioniert es bei der <ul> Ebene, müssen Sie möglicherweise die platzieren list-style-type: none; Bei der <li> Niveau:

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

EDIT: Wenn nötig, verwenden !important:

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

13
2017-10-08 08:14