Ich brauche eine ungeordnete Liste ohne Aufzählungszeichen

Erstellt habe ich eine ungeordnete Liste. Ich fühle mich die Kugeln in die ungeordnete Liste sind störend, so dass ich Sie entfernen möchten.

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

InformationsquelleAutor praveenjayapal | 2009-06-22

css html

3493

Können Sie entfernen die Kugeln durch die Einstellung der list-style-type zu none auf den CSS-Code für das übergeordnete element (in der Regel ein <ul>), zum Beispiel:
```
ul {
  list-style-type: none;
}
```
Vielleicht möchten Sie auch hinzufügen padding: 0 und margin: 0 zu, dass, wenn Sie entfernen möchten Einzug als gut.

Sehen Listutorial für einen großen Durchlauf der Liste Formatierung Techniken.
- Scheint gut zu funktionieren in meinem IE9 (auf Win7). (es ist eine komplexe Seite, nicht eine einfache POC, vielleicht etwas anderes geändert, das Verhalten)
- Wenn Sie wie ich sind und auch auf der Suche für how to remove den Einzug zu sehen stackoverflow.com/a/13939142/846727
- Oh, wie oft ich gekommen bin wieder hier, für copy/paste 🙂
InformationsquelleAutor Paul Dixon
554

Wenn Sie mit Bootstrap, es hat eine "unstyled" Klasse:

Entfernen Sie die default-Liste-Stil und padding auf der linken Seite auf Elemente der Liste (sofort Kinder nur).

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
- In der Boostrap 3 dies hat sich ein wenig geändert zu: class="list-unstyled"
- Nur Frage mich, wo Sie Jungs Lesen? Ich habe es gesucht aber habe es nicht gefunden.
- href="http://getbootstrap.com/css/#type-lists" >getbootstrap.com/css/#type-lists
- Bootstrap 3 Klasse funktioniert auch mit Bootstrap 4
- Wenn wir die aufgelisteten Klassen für jede CSS-framework, hätten wir ein Chaos auf StackOverflow. Eine schnelle Google-Suche offenbart Bootstrap wurde nur von 2% der websites auf Ihrem Höhepunkt, und das ist wohl fallen mit der Einführung von mehr vernünftigen Lösungen, wie flexbox und css-raster.
- Tatsächlich, diese Antwort ist genau das, was ich suchte. Und Bootstrap wird von 3,6% der gesamten Internet, so dass es nicht herunterfallen kann. trends.builtwith.com/docinfo/Twitter-Bootstrap Eine kurze Google-Suche zeigt, dass Bootstrap ist konsequent platziert in der "beliebtesten CSS-frameworks" - Kategorie.
InformationsquelleAutor Scott Stafford
202

Müssen Sie list-style: none;
```
<ul style="list-style: none;">
    <li> ...</li>
</ul>
```
- Beachten Sie, dass inline-css überstimmt css-Dateien. Je nach Anwendung/Entwicklung von Praktiken, kann es ziemlich lästig sein.
InformationsquelleAutor karim79
52

In CSS, style,
```
 list-style-type: none;
```
InformationsquelleAutor Haim Evgi
45

Würden Sie haben, um einen Stil hinzufügen, um die <ul> element wie folgt:
```
<ul style="list-style: none; ">
    <li>Item</li>
    ...
    <li>Item</li>
</ul>
```
Wird, entfernen Sie die Kugeln. Man könnte auch hinzufügen, die CSS in einem stylesheet, wie die Beispiele in den vorherigen Antworten.

InformationsquelleAutor DanO
42

In CSS...
```
ul {
   list-style: none;
}
```
InformationsquelleAutor Tim Hoolihan
37

Kleine Verfeinerung zu den vorherigen Antworten: Um mehr Zeilen besser lesbar, wenn Sie über zu schwappen zusätzliche Bildzeilen:
```
ul, li {list-style-type: none;}

li {padding-left: 2em; text-indent: -2em;}
```
- Funktioniert, aber nur für den IE8
InformationsquelleAutor charliehoward
36

Verwenden Sie die folgende CSS:
```
ul {
  list-style-type: none
}
```
InformationsquelleAutor Ole Spaarmann
18

Native:
```
ul { list-style-type: none; }
```
Bootstrap:
```
<ul class="list-unstyled list-group">
    <li class="list-group-item">...</li>
</ul>
```
Hinweis:
Wenn Sie mit Liste-Gruppen, dann gibt es keine Notwendigkeit für list-unstyled.
- Dies ist das gleiche wie so ziemlich alle die halbes Dutzend oder so Antworten bevor es.
InformationsquelleAutor Cody

Wenn Sie nicht in der Lage bist, es zu machen, arbeiten an der <ul> Ebene, die Sie möglicherweise benötigen, um die list-style-type: none; am <li> level:

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

Können Sie erstellen Sie eine CSS-Klasse, um dies zu vermeiden: Wiederholung

<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, mit !important:

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

InformationsquelleAutor Antonio Ooi

12

Ich verwendet " list-style-sowohl auf der ul-und li um die Kugeln zu entfernen. Ich wollte zu ersetzen, die Kugeln mit einem benutzerdefinierten Zeichen, in diesem Fall ein 'Strich'. Das gibt einen schönen Effekt.
Also mit diesem 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 ein schön eingerückt Effekt funktioniert, wenn der text umgebrochen wird.

InformationsquelleAutor Chris Halcrow

CSS:

.liststyle {
    list-style-type: none;
}

HTML:

<ul class="liststyle">
    <li>Test</li>
</ul>

Dies ist die gleiche wie die top-Antwort, im Prinzip.

InformationsquelleAutor Jijo Paulose

3

Können Sie versuchen, diese

CSS:
```
ul {
  list-style: none
}
```
HTML:
```
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>
```
- Dies wurde bereits beantwortet. Bitte Lesen Sie die Antworten vor der Veröffentlichung um so Doppelarbeit zu vermeiden-Lösungen.
InformationsquelleAutor Prince

Können Sie entfernen Kugeln mithilfe der folgenden CSS:

    ul {
         list-style: none; //or list-style-type:none; 
       }

Können Sie sogar fügen Sie Ihre benutzerdefinierte Liste Stil wie:

li:before {
            content: '✔';
            color:red;
          }

InformationsquelleAutor Novice

2

Können Sie Sie entfernen, Kugeln mit style="list-style-type:none".

Versuchen Sie dies:
```
<ul style="list-style-type:none" >

     <li>op1</li>
     <li>op2</li>
     <li>op2</li>

</ul> 
```
- Diese Antwort nur wiederholt die gefundenen Lösungen in buchstäblich allen anderen 10+ Antworten. Bitte Lesen Sie bereits vorhandene Antworten vor der Veröffentlichung zu vermeiden, sich wiederholende Inhalte.
InformationsquelleAutor blackbird

CSS-code

ul
{
    list-style-type: none;
}

HTML-code

<ul>
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>   
</ul>

Dies ist die gleiche wie die top-Antwort, im Prinzip.

InformationsquelleAutor Arun

2

Diese Aufträge eine Liste vertikal ohne Kugel-Punkte. In nur einer Zeile!
```
li {
    display: block;
}
```
InformationsquelleAutor matt
1

Wenn Sie erreichen wollte, dies mit Reine HTML-allein, diese Lösung funktioniert in allen gängigen Browsern:

Beschreibung Listet

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>
```
Produzieren und eine Liste ähnlich der folgenden:
```
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
- Wenn du gehst, um diese Methode zu verwenden, verwenden Sie die semantisch richtige Art und Weise der Eingabe von einem Begriff definiert werden, in <dt> und der definition des Begriffs in <dd>.
InformationsquelleAutor ShaneB
1

Ich ausprobiert und beobachtet:
```
header ul {
   margin: 0;
   padding: 0;
}
```
InformationsquelleAutor Dadhich Sourav

Vollständig zu entfernen 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;

InformationsquelleAutor Masih Jahangiri

Können Sie entfernen Sie die "Kugeln" durch die Einstellung der "list-style-type: none;" Wie

ul
{
    list-style-type: none;
}

ODER

<ul class="menu custompozition4"  style="list-style-type: none;">
    <li class="item-507"><a href=#">Strategic Recruitment Solutions</a>
    </li>

</ul>

InformationsquelleAutor Muhammad Awais

Ändern Sie einfach Ihre list-style-type oder list-style in Ihrer Klasse none für die <li>.

Etwas wie dieses:

li {
  list-style-type : none;
}

Auch für weitere Informationen, ich Liste alle Eigenschaften, die Sie zuordnen können list-style-type führen Sie den code unten zu sehen, die Ergebnisse in einem Ziel:

CSS:

.none {
  list-style-type: none;
}

.disc {
  list-style-type: disc;
}

.circle {
  list-style-type: circle;
}

.square {
  list-style-type: square;
}

.decimal {
  list-style-type: decimal;
}

.georgian {
  list-style-type: georgian;
}

.cjk-ideographic {
  list-style-type: cjk-ideographic;
}

.kannada {
  list-style-type: kannada;
}

.custom:before {
  content: '◊ ';
  color: red;
}

HTML:

<ul>
  <li class="none">none</li>
  <li class="disc">disc</li>
  <li class="circle">circle</li>
  <li class="square">square</li>
  <li class="decimal">decimal</li>
  <li class="georgian">georgian</li>
  <li class="cjk-ideographic">cjk-ideographic</li>
  <li class="kannada">kannada</li>
  <li class="none custom">custom</li>
</ul>

InformationsquelleAutor Alireza

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

InformationsquelleAutor Oracular Man

Den code unten ein gutes und einfaches Beispiel zum entfernen von Aufzählungszeichen für eine ungeordnete Liste.

<!DOCTYPE html>
<html>
    <body>

    <h2>Unordered List without Bullets</h2>

    <ul style="list-style-type:none">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

    </body>
</html>

Aber ist nicht die head element ein erforderliches element in HTML?

InformationsquelleAutor James

Wenn Sie ul in einem div-block dann

//HTML file
<div class="some-class">
    <ul>
        <li>One</li>
    </ul>
</div>

In Ihrem Stylesheet

.some-class ul {
       list-style: none;
}

Wenn Sie nur mit ul direkt ohne Klasse oder div-block:

//Style Sheet
ul {
    list-style: none;
}

InformationsquelleAutor Sree Ramana

-2

Wie bereits erwähnt, der beste Weg, dies zu tun ist durch das hinzufügen list-style-type: none zu den ul element. Es ist ein großer Artikel auf Kugel Stile ich denke, Sie könnten davon profitieren,hier.

InformationsquelleAutor Nesha Zoric
-5

Im Falle Sie möchten, die Dinge einfach zu halten, ohne auf CSS, ich habe nur eine   in meinen code-Zeilen. I. e., <table></table>.

Ja, lässt es ein paar Räume, aber das ist nicht eine schlechte Sache.
- -1 Einfach? Ohne CSS? Dies ist, warum viele websites sind in der schockierenden Zustand Sie sich befinden. CSS-fügt Einfachheit. Tabellen sind nicht den Weg nach vorne.
- Komm, das war, antwortete in 2013. Gimme a break. 😉 Ich kann nicht glauben, dass ich jemals schrieb.
InformationsquelleAutor Phil

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Bootstrap 2:

Bootstrap 3 und 4:

CSS-code

HTML-code