it-swarm.com.de

Ich brauche eine ungeordnete Liste ohne Aufzählungszeichen

Ich habe eine ungeordnete Liste erstellt. Ich halte die Aufzählungszeichen in der ungeordneten Liste für störend, daher möchte ich sie entfernen.

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

2356
praveenjayapal

Sie können Aufzählungszeichen entfernen, indem Sie list-style-type im CSS für das übergeordnete Element (normalerweise ein _<ul>_) auf none setzen. Beispiel:

_ul {
  list-style-type: none;
}
_

Sie können auch _padding: 0_ und _margin: 0_ hinzufügen, wenn Sie auch Einrückungen entfernen möchten.

In Listutorial finden Sie eine ausführliche Anleitung zur Formatierung von Listen.

3491
Paul Dixon

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

Entfernen Sie den Standard-Listenstil und das linke Auffüllen von Listenelementen (nur unmittelbar 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

554
Scott Stafford

Sie müssen list-style: none; verwenden

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

In CSS, Stil,

 list-style-type: none;
52
Haim Evgi

Sie müssten dem <ul> -Element einen Stil wie den folgenden hinzufügen:

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

Das wird die Kugeln entfernen. Sie können das CSS auch wie in den Beispielen in den vorherigen Antworten in ein Stylesheet einfügen.

45
DanO

In CSS ...

ul {
   list-style: none;
}
42
Tim Hoolihan

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

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

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

Verwenden Sie das folgende CSS:

ul {
  list-style-type: none
}
36
Ole Spaarmann

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 die Liste nicht entstylen.

18
Cody

Wenn es auf der Ebene <ul> nicht funktioniert, müssen Sie möglicherweise list-style-type: none; auf der Ebene <li> 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>
14
Antonio Ooi

Ich habe sowohl auf der ul als auch auf der li einen Listenstil verwendet, um die Aufzählungszeichen zu entfernen. Ich wollte die Kugeln durch ein benutzerdefiniertes Zeichen ersetzen, in diesem Fall einen "Gedankenstrich". Das ergibt einen schönen Effekt. Verwenden Sie also 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 gut eingerückten Effekt, der funktioniert, wenn der Text umbrochen wird.

12
Chris Halcrow

CSS:

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

HTML:

<ul class="liststyle">
    <li>Test</li>
</ul>
6
Jijo Paulose

Sie können dies versuchen

ul {
  list-style: none
}
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>
3
Prince

CSS-Code

ul
{
    list-style-type: none;
}

HTML Quelltext

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

Sie können Aufzählungszeichen entfernen, indem Sie Folgendes verwenden: CSS:

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

Sie können sogar Ihren benutzerdefinierten Listenstil wie folgt hinzufügen:

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

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

li {
    display: block;
}
2
matt

Sie können Aufzählungszeichen mit style="list-style-type:none" entfernen.

Versuche dies:

<ul style="list-style-type:none" >

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

</ul> 
2
blackbird

So entfernen Sie den ul -Standardstil 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;
1
Masih Jahangiri

Wenn Sie dies nur mit reinem HTML erreichen möchten, funktioniert diese Lösung in allen gängigen Browsern:

Beschreibungslisten

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>

Welche wird eine Liste ähnlich der folgenden erzeugen:

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

1
ShaneB

Ich habe versucht und beobachtet:

header ul {
   margin: 0;
   padding: 0;
}
1
Dadhich Sourav
 <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>
0
Oracular Man

Der folgende Code ist 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>
0
James

Wenn Sie ul in einem div-Block verwenden, dann

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

In Ihrem Stylesheet

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

Wenn Sie ul nur direkt ohne Klassen- oder Div-Block verwenden:

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

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

Etwas wie das:

li {
  list-style-type : none;
}

Für weitere Informationen liste ich alle Eigenschaften auf, die Sie list-style-type zuweisen können. Führen Sie den folgenden Code aus, um alle Ergebnisse in einem Ziel anzuzeigen:

.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;
}
<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>
0
Alireza

Sie können das "Aufzählungszeichen" entfernen, indem Sie das "Listenstil-Typ: keine;" wie festlegen

ul
{
    list-style-type: none;
}

OR

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

</ul>
0
Muhammad Awais