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?
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?
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
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;
}
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.
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>
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>
ul li { margin: ???; padding: ???; line-height: ???; }
alle oder einige dieser CSS-Attribute.– Brad Christie
8. Oktober 2013 um 17:31 Uhr