Wie stelle ich den vertikalen Abstand zwischen Listenelementen ein?

Lesezeit: 5 Minuten

Benutzer-Avatar
Brice Coustillas

Innerhalb eines <ul> -Element kann der vertikale Zeilenabstand natürlich mit dem line-height-Attribut formatiert werden.

Meine Frage ist, innerhalb von a <ul> Element, wie stelle ich den vertikalen Abstand zwischen den Listenelementen ein?

  • ul li { margin: ???; padding: ???; line-height: ???; } alle oder einige dieser CSS-Attribute.

    – Brad Christie

    8. Oktober 2013 um 17:31 Uhr

Sie können Marge verwenden. Siehe das Beispiel:

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

  • Verwenden Sie insbesondere Marge auf der li Elemente nicht die ul Element.

    – duanev

    21. April 2020 um 2:00 Uhr


HTML

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS

li:not(:last-child) {
    margin-bottom: 5px;
}

EDIT: Wenn Sie den Sonderfall für das letzte li-Element nicht verwenden, hat Ihre Liste danach einen kleinen Abstand, den Sie hier sehen können: http://jsfiddle.net/wQYw7/

Vergleichen Sie das jetzt mit meiner Lösung: http://jsfiddle.net/wQYw7/1/

Sicher, das funktioniert nicht in älteren Browsern, aber Sie können einfach js-Erweiterungen verwenden, die dies für ältere Browser ermöglichen.

  • @Layne Ein Teil unserer Arbeit als Webentwickler/Programmierer besteht darin, Lösungen bereitzustellen, die in so vielen Umgebungen wie möglich funktionieren. Ihre Antwort ist wirklich übertrieben für die gestellte Frage.

    – Desinformation

    8. Oktober 2013 um 17:36 Uhr

  • Ich glaube nicht. Sie bieten nur eine Lösung für die Umgebung an, auf die Sie abzielen möchten, alles andere wäre übertrieben, es sei denn, Sie planen eine Erweiterung. Außerdem haben alle Antworten den Nachteil, dass vor und/oder nach dem ersten/letzten Listenelement Leerzeichen hinzugefügt werden. Was nicht die Frage war, er wollte nur einen Abstand ZWISCHEN den Listenelementen haben (zumindest schrieb er es). Das letzte Element in den anderen Antworten wird danach einen Abstand haben, obwohl es keine folgenden li-Elemente gibt.

    Benutzer238801

    8. Oktober 2013 um 17:41 Uhr


  • Die Umgebung, mit der er arbeitet, sind Webbrowser. Das ist nicht übertrieben, um eine Lösung vorzuschlagen, die überall funktioniert. Und wenn Sie sich wirklich Sorgen um den Rand des letzten Elements machen, würden Sie keine Lösung vorschlagen, für deren Behebung js erforderlich wäre. Du könntest benutzen :first-child und es würde in allem IE7+ funktionieren

    – Desinformation

    8. Oktober 2013 um 17:52 Uhr

  • @disinfor Ich bin anderer Meinung, wenn es darum geht, auf alles abzuzielen. Ein Teil des Stresses bei der Webentwicklung kommt von der Unterstützung von Browsern, die uns nicht unterstützen. Safari ist einer von ihnen. Wir müssen uns gegen Browser behaupten, die das Internet zurückhalten, medium.com/@richtr/…. Unsere Webseiten sollten die “Wir unterstützen Ihren Browser nicht”-Hinweise zurückbringen nicht durch die Hölle gehen, damit es überall funktioniert. Und wir müssen auch die Kunden informieren und uns für sie einsetzen. Oder wir können nichts tun und tolle Fußmatten sein.

    – 1,21 Gigawatt

    31. März 2016 um 22:54 Uhr


  • @1,21 Gigawatt „Unsere Webseiten sollten das „Wir unterstützen Ihren Browser nicht“ zurückbringen“ mhm, nein. Das nennt man Wettbewerbssabotage und ist in mehreren Ländern illegal. Microsoft hat das mit Skype for Web gemacht. Auch in anderen Browsern funktioniert Skype for Web einwandfrei. Google hat für mehr als ein Jahr eine Youtube-Fehlfunktion in Safari verursacht. Google hindert Tor-Benutzer daran, bestimmte Dienste zu nutzen. Ist es nicht der Sinn der „Webplattform“, Apps und Dienste plattformunabhängig zu machen, also bestimmte Plattformen nicht zu blockieren? Wenn Sie das tun möchten, warum erstellen Sie nicht stattdessen native Programme? Am Ende sind sie mächtiger.

    – Andreas verabscheut Zensur

    26. Januar 2020 um 0:19 Uhr

Benutzer-Avatar
Cedervall

Alte Frage, aber ich denke, es fehlte eine Antwort. Ich würde einen benachbarten Geschwisterselektor verwenden. Auf diese Weise schreiben wir nur “eine” CSS-Zeile und berücksichtigen den Platz am Ende oder Anfang, der den meisten Antworten fehlt.

li + li {
  margin-top: 10px;
}

  • Dies verdient mehr positive Stimmen, um das Bewusstsein für diese Lösung zu schärfen. Das ist so einfach wie es sein kann.

    – Timmy Chan

    22. September 2020 um 4:15 Uhr


  • mit Abstand die beste Lösung

    – trig79

    29. März 2021 um 8:48 Uhr

  • Der wichtige Punkt hier ist für mich margin-top statt line-height. Ich habe mehrzeilige Listenelemente – dh jedes Listenelement nimmt mehrere Zeilen ein – und ich möchte keinen zusätzlichen Abstand zwischen den Zeilen innerhalb eines Listenelements; Ich möchte nur zusätzlichen Abstand zwischen Listenelementen. Das tut das. (Ich schreibe HTML auch in einem Kontext, in dem ich per se keinen CSS-Code verwenden kann; ich muss das CSS inline einfügen.)

    – Mars

    12. April 2021 um 22:58 Uhr

Ich würde dazu neigen, was den Vorteil der IE8-Unterstützung hat.

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

JSFiddle

Füge hinzu ein margin zu deinem li Stichworte. Das schafft Platz zwischen den li und Sie können verwenden line-height um den Abstand zum Text innerhalb der festzulegen li Stichworte.

Benutzer-Avatar
Tom Bartenstein

Verwenden Sie zum Anwenden auf eine ganze Liste

ul.space_list li { margin-bottom: 1em; }

Dann im html:

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>

Benutzer-Avatar
tcanbolat

Sie können auch die Eigenschaft line-height auf der ul verwenden

ul {
  line-height: 45px;
}
<ul>
<li>line one</li>
<li>line two</li>
<li>line three</li>
</ul>

1334560cookie-checkWie stelle ich den vertikalen Abstand zwischen Listenelementen ein?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy