Wie kann man Aufzählung mit CSS entfernen, ersetzen oder stylen

Inhaltsverzeichnis

Wie erstellt man eine Liste ohne Aufzählungszeichen

In einigen Fällen müssen Sie die Aufzählungszeichen/Stil der Listen entfernen (<ol>) und ungeordnet (<ul>). Das Entfernen von HTML-Listenaufzählungen ist nicht schwierig. Das kann mithilfe von CSS-Eigenschaften list-style oder list-style-type gemacht werden.

Ihr Code wird wie folgt aussehen:

ul {
list-style-type: none;
}

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      ul {
      list-style: none;
      }
      ol {
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Unordered list</h2>
    <ul>
      <li>Listenelement 1</li>
      <li>Listenelement 2</li>
      <li>Listenelement 3</li>
    </ul>
    <h2>Geordnete Liste</h2>
    <ol>
      <li>Listenelement 1</li>
      <li>Listenelement 2</li>
      <li>Listenelement 3</li>
    </ol>
  </body>
</html>

Wenn Sie beabsichtigen, eine Liste oder ein Listenelement zu haben, aber keine Aufzählungszeichen oder Zahlen zu haben, sollen Sie class anwenden. Das kann jedes Mal verwendet werden, wenn Sie Aufzählungspunkte entfernen müssen.

Hier haben wir eine Klasse mit dem Namen "nolist" für geordnete Listen, die bei Bedarf jederzeit in der Zukunft verwendet werden kann.

Sie können die Klasse auch auf jedes der Listenelemente (<li>) so einstellen, dass ein oder mehrere Aufzählungselemente keine Aufzählung haben, während die anderen Aufzählungen unverändert bleiben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .nolist {
      list-style: none ;
      }
    </style>
  </head>
  <body>
    <h2>Ungeordnete Liste</h2>
    <ul>
      <li>Listenelement 1</li>
      <li class="nolist">Listenelement 2</li>
      <li>Listenelement 3</li>
    </ul>
    <h2>Geordnete Liste</strong></h2>
    <ol class="nolist">
      <li>Listenelement 1</li>
      <li>Listenelement 2</li>
      <li>Listenelement 3</li>
    </ol>
  </body>
</html>

Wie ersetzt man Aufzählungszeichen durch Bilder

CSS kann verwendet werden, um Listenaufzählungszeichen in Quadrate oder Kreise zu konvertieren, aber das gibt wenig Kontrolle über ihr Aussehen oder ihre Positionierung. Das Ändern von Standard-HTML-Listenaufzählungszeichen in Bilder ist eine großartige Möglichkeit, sie mit Ihrem Website-Thema zu verbinden und Ihre Website optisch attraktiver zu gestalten.

Es gibt 2 Möglichkeiten, Bilder für Listenelemente einzustellen:

  1. Verwenden Sie list-style-image, um HTML-Aufzählungspunkte durch grafische Bilder zu ersetzen. Außerdem ist die Platzierung dieser Bilder in den meisten modernen Browsern uneinheitlich. Es gibt auch nur sehr wenig Kontrolle darüber, wie neben den Listenelementen die Aufzählungszeichen erscheinen.

Die HTML-Aufzählungspunkte können durch Bilder mit "list-style-image" ersetzt werden. Die Platzierung dieser Bilder ist jedoch in den meisten modernen Browsern inkonsistent.

Es gibt nur sehr wenig Kontrolle darüber, wie die Aufzählungszeichen neben den Listenelementen erscheinen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      ul {
      list-style-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png");
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Listenelement 1</li>
      <li>Listenelement 2</li>
      <li>Listenelement 3</li>
    </ul>
  </body>
</html>
  1. von Hintergrundbildern für Aufzählungszeichen. Also, lassen Sie uns sehen, wie es Schritt für Schritt gemacht wird:
  • Erstellen Sie eine einfache ungeordnete Liste
  • Entfernen Sie den Aufzählungspunkt mit list-style-type: none
  • Entfernen Sie Padding und Margin

Standard HTML-Listen haben eine gewisse Linkseinrückung. Der Betrag variiert je nach Browser. Einige Browser verwenden Polsterung (Mozilla, Safari) und andere verwenden Ränder (Internet Explorer, Opera), um die Höhe der Einrückung festzulegen.

Um die Linkseinrückung über alle Browser hinweg konstant zu entfernen, setzen Sie sowohl padding als auch margin auf "0" für das Element <ul>:

ul {
padding: 0;
margin: 0;
}
  • Fügen Sie Ihren eigenen Einzug hinzu

Falls die Linkseinrückung erforderlich ist, wird es empfohlen, margin-left zu verwenden. Da das Padding derzeit auf "0" gesetzt ist, kann eine genaue Messung für den linken Rand definiert werden, die über alle Browser hinweg konsistent ist.

margin-left: 1em;
  • Hintergrundbild hinzufügen

Verwenden Sie die CSS-Eigenschaft background-image, um ein Hintergrundbild für das Element <li> hinzuzufügen. Auf diese Weise wird das Hintergrundbild über den Hintergrund jedes Listenelements wiederholt, was nicht gut aussieht.

  • Keine Wiederholung einstellen

Um zu verhindern, dass sich das Hintergrundbild unter den Listenelementen wiederholt, setzen Sie die Eigenschaft background-repeat auf "no-repeat". Es gibt jetzt nur noch ein Bild pro Listenelement, aber es muss positioniert werden.

li { 
background-image: url(star.png); 
background-repeat: no-repeat;
}
  • Hintergrundbild positionieren

Verwenden Sie die CSS-Eigenschaft background-position, um die Position der Hintergrundbilder so einzustellen, dass sie zu den Texten passen.

Die Bilder werden nun horizontal mit dem Inhalt ausgerichtet. Der Inhalt befindet sich jedoch über den Bildern.

background-position: 1px;
  • Verschieben des Inhalts

Um den Inhalt vom Hintergrundbild wegzubewegen, wenden Sie padding-left auf das Element <li> an. In diesem Fall wurde "20px" verwendet. Wie bei der vertikalen Ausrichtung wird das Auffüllen der Liste durch die Größe des Bildes bestimmt.

padding-left: 20px;

Nun lassen Sie uns sehen, wie das vollständige Beispiel aussehen wird:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      }
      li {
      background-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png");
      background-repeat: no-repeat;
      background-position: 1px;
      padding-left: 20px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Grün</li>
      <li>Blau</li>
      <li>Gelb</li>
      <li>Rot</li>
    </ul>
  </body>
</html>
Es ist auch möglich, für jedes Listenelement ein anderes Hintergrundbild zu verwenden. Fügen Sie einfach Klassen hinzu und legen Sie das Hintergrundbild für jede Klasse fest.

Wie erstellt man horizontale Listen

Die Erstellung von horizontalen Listen ist nicht so schwierig. Es ist eine gute Möglichkeit, Listen wie Schaltflächen oder Navigationsmenüs funktionieren zu lassen. Es gibt viele Methoden, die für die Erstellung einer horizontalen Liste verwendet werden können. Die Hauptsache ist display: inline, definiert für das Element <li>.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      #container ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      text-align: center;
      }
      #container ul li { 
      display: inline; 
      }
      #container ul li a {
      text-decoration: none;
      padding: 5px 20px;
      color: #fff;
      background-color: #1c87c9;
      }
      #container ul li a:hover
      {
      color: #fff;
      background-color: #369;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Kontakt</a></li>
        <li><a href="#">Über uns</a></li>
      </ul>
    </div>
  </body>
</html>

Wie stylt man Listen

Gestalten Sie Listen mit Farben mit color und background-color:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      ol {
      background: #1c87c9;
      padding: 20px;
      color: cyan;
      }
      ul {
      background: #8ebf42;
      padding: 20px;
      }
      ol li {
      background: #666;
      padding: 5px;
      margin-left: 35px;
      }
      ul li {
      background: #eee;
      margin: 5px;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Kaffee</li>
      <li>Tee</li>
      <li>Milch</li>
    </ol>
    <ul>
      <li>Kaffee</li>
      <li>Tee</li>
      <li>Milch</li>
    </ul>
  </body>
</html>

Erstellen Sie eine Liste mit Rahmen in voller Breite mithilfe von CSS-Eigenschaften border und border-bottom CSS properties:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      ul {
      border: 1px solid #ddd;
      background-color: #eee;
      list-style-type: none;
      padding: 0;
      }
      ul li {
      padding: 8px 10px;
      border-bottom: 1px solid #ddd;
      }
      ul li:last-child {
      border-bottom: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Kaffee</li>
      <li>Tee</li>
      <li>Milch</li>
    </ul>
  </body>
</html>

Fügen Sie mit der CSS-Eigenschaft border-left einen Rahmen zu Ihren Listenelementen hinzu:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      ul {
      border-left: 5px solid #8ebf42;
      background-color: #eee;
      list-style-type: none;
      padding: 10px 20px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <ul>
        <li>Kaffee</li>
        <li>Tee</li>
        <li>Milch</li>
      </ul>
    </div>
  </body>
</html>

Um verschiedene Aufzählungspunkte in einer Liste zu haben, müssen Sie lediglich class auf jedes Listenelement anwenden undlist-style für sie separat angeben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .disc {
      list-style: disc;
      }
      .square {
      list-style: square;
      }
      .armenian {
      list-style: armenian;
      }
      .lower-greek {
      list-style: lower-greek;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="disc">Disc Aufzählungspunkt</li>
      <li class="square">Square Aufzählungspunkt</li>
      <li class="armenian">Armenischer Aufzählungspunkt</li>
      <li class="lower-greek">Lower-greek Aufzählungspunkt</li>
    </ul>
  </body>
</html>

Beispiel für alle Markierungen von Listenelementen

Hier finden Sie ein Beispiel, das alle Typen von Aufzählungspunkten enthält - geordnete (<ol>) und ungeordnete (<ul>):

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      ul.a {list-style-type: circle;}
      ul.b {list-style-type: square;}
      ol.c {list-style-type: upper-roman;}
      ol.d {list-style-type: lower-alpha;}
      ol.e {list-style-type: armenian;}
      ol.f {list-style-type: decimal;}
      ol.g {list-style-type: cjk-ideographic;}
      ol.h {list-style-type: decimal-leading-zero;}
      ol.i {list-style-type: georgian;}
      ol.j {list-style-type: hebrew;}
      ol.k {list-style-type: hiragana;}
      ol.l {list-style-type: hiragana-iroha;}
      ol.m {list-style-type: katakana;}
      ol.n {list-style-type: katakana-iroha;}
      ol.o {list-style-type: lower-greek;}
      ol.p {list-style-type: lower-latin;}
      ol.q {list-style-type: lower-roman;}
      ol.r {list-style-type: none;}
      ol.s {list-style-type: upper-alpha;}
      ol.t {list-style-type: upper-latin;}
    </style>
  </head>
  <body>
    <h2>Examples of unordered lists:</h2>
    <h3>Circle</h3>
    <ul class="a">
      <li>New York</li>
      <li>Las Vegas</li>
      <li>Washington</li>
    </ul>
    <h3>Square</h3>
    <ul class="b">
      <li>San Francisco</li>
      <li>Los Angeles</li>
      <li>Miami</li>
    </ul>
    <h2>Examples of ordered lists:</h2>
    <h3>Upper-roman</h3>
    <ol class="c">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ol>
    <h3>Lower-alpha</h3>
    <ol class="d">
      <li>Dubai</li>
      <li>Abu Dhabi</li>
      <li>Qatar</li>
    </ol>
    <h3>Armenian</h3>
    <ol class="e">
      <li>Yerevan</li>
      <li>Paris</li>
      <li>Rome</li>
    </ol>
    <h3>Decimal</h3>
    <ol class="f">
      <li>Sydney</li>
      <li>Hong Kong</li>
      <li>Moscow</li>
    </ol>
    <h3>Cjk-ideographic</h3>
    <ol class="g">
      <li>Kiev</li>
      <li>Saint-Petersburg</li>
      <li>Tula</li>
    </ol>
    <h3>Decimal-leading-zero</h3>
    <ol class="h">
      <li>Bangkok</li>
      <li>Gyumri</li>
      <li>Valencia</li>
    </ol>
    <h3>Georgian</h3>
    <ol class="i">
      <li>Madrid</li>
      <li>Barcelona</li>
      <li>Prague</li>
    </ol>
    <h3>Hebrew</h3>
    <ol class="j">
      <li>Jerusalem</li>
      <li>Toronto</li>
      <li>Prague</li>
    </ol>
    <h3>Hiragana</h3>
    <ol class="k">
      <li>Cairo</li>
      <li>Tokyo</li>
      <li>Athens</li>
    </ol>
    <h3>Hiragana-iroha</h3>
    <ol class="l">
      <li>Tehran</li>
      <li>Tavriz</li>
      <li>Tel Aviv</li>
    </ol>
    <h3>Katakana</h3>
    <ol class="m">
      <li>Munich</li>
      <li>Berlin</li>
      <li>Bavaria</li>
    </ol>
    <h3>Katakana-iroha</h3>
    <ol class="n">
      <li>Brussels</li>
      <li>Istanbul</li>
      <li>Sydney</li>
    </ol>
    <h3>Lower-greek</h3>
    <ol class="o">
      <li>Seville</li>
      <li>Granada</li>
      <li>Venice</li>
    </ol>
    <h3>Lower-latin</h3>
    <ol class="p">
      <li>Budapest</li>
      <li>Vienna</li>
      <li>Amsterdam</li>
    </ol>
    <h3>Lower-roman</h3>
    <ol class="q">
      <li>Buenos Aires</li>
      <li>Rio de Janeiro</li>
      <li>San Paolo</li>
    </ol>
    <h3>None</h3>
    <ol class="r">
      <li>Vilnius</li>
      <li>Tallinn</li>
      <li>Riga</li>
    </ol>
    <h3>Upper-alpha</h3>
    <ol class="s">
      <li>Montreal</li>
      <li>Melbourne</li>
      <li>Edinburgh</li>
    </ol>
    <h3>Upper-latin</h3>
    <ol class="t">
      <li>Dublin</li>
      <li>Mexico</li>
      <li>Florence</li>
    </ol>
  </body>
</html>