HTML-Listeneinzug

In diesem Beitrag werden viele Möglichkeiten zum Einrücken von Text/Liste in einem HTML-Dokument untersucht.

Der Abstand zwischen Textzeilen in einem Block oder einer linken Ecke und Listenkomponenten wird durch den Text-/Listeneinzugsstil bestimmt. Es bezeichnet normalerweise den Beginn eines Absatzes.

Bei der Bezugnahme auf den Text bezieht sich Einzug oder Einzug auf die Abstandsänderung zwischen dem linken und rechten Rand eines Absatzes. Bewegen Sie den Cursor an den Anfang der Zeile und drücken Sie die Tab-Taste auf der Tastatur, um Text einzurücken.

Listeneinzug in HTML

HTML-Listen werden verwendet, um Informationslisten auszudrücken. Jede Liste kann eine oder mehrere Listenkomponenten haben.

HTML-Listen werden in drei Typen eingeteilt.

1. ol - Nummerierte oder geordnete Liste
2. ul - Liste (ungeordnet oder mit Aufzählungszeichen)
3. dl - Liste der Beschreibungen oder Liste der Definitionen

Ungeordnete Listenelemente (<ul>) rücken ihre Listenelemente standardmäßig ein. Wenn Sie den Einzugsabstand anpassen möchten, können Sie dies mit CSS tun.

Es gibt zwei Techniken zum Auflisten von Einrückungen, die häufig verwendet werden.

1. margin-left: Mit diesem Attribut wird der Randbereich auf der linken Seite eines Elements festgelegt. Ein positiver Wert entfernt ihn von seinen Nachbarn, während ein negativer Wert ihn näher bringt.
2. padding-left: Mit diesem Attribut wird der Abstand zwischen Inhalt und Rand angegeben. Das Attribut padding-left spezifiziert das linke Padding (Leerzeichen) eines Elements.

In CSS ist padding der Bereich zwischen dem Rand und dem Inhalt eines Elements, während ein margin ein Bereich ist, der den Rand eines Elements umgibt.

Die Eigenschaft padding steuert den Innenraum eines Elements, die Eigenschaft margin den Bereich darum herum.

Um das vorherige Konzept besser zu verstehen, betrachten Sie das folgende Beispiel.

<ul class="outerUL">
  <li>Tea</li>
  <li>Coffee
    <ul class="innerUL">
    <li>Black coffee</li>
    <li>Green coffee</li>
    </ul>
  </li>
  <li>Milk Shake</li>
</ul>

.innerUL {
    padding-left: 50px;
}

.outerUL {
    margin-left: 100px;
}

Im vorherigen Beispiel haben wir eine ungeordnete Liste und eine verschachtelte ungeordnete Liste definiert. Die Eigenschaft margin-left wird verwendet, um die äußere Liste einzurücken, und die Eigenschaft padding-left wird verwendet, um die innere Liste einzurücken.

Führen Sie die obige Codezeile in jedem mit HTML kompatiblen Browser aus.