Wie stelle ich den vertikalen Abstand zwischen Listenelementen ein?

114

Innerhalb eines <ul>Elements kann der vertikale Abstand zwischen Linien eindeutig mit dem Attribut Zeilenhöhe formatiert werden.

Meine Frage ist, <ul>wie ich innerhalb eines Elements den vertikalen Abstand zwischen den Listenelementen einstelle.

html css html-lists Brice Coustillas
quelle
1
ul li { margin: ???; padding: ???; line-height: ???; }alle oder einige dieser CSS-Attribute.
Brad Christie

Antworten:

112

Sie können Rand verwenden. Siehe das Beispiel:

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

quelle
Verwenden Sie insbesondere den Rand für die liElemente, nicht für das ulElement.
Duanev
41

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;
}

BEARBEITEN: 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, dies funktioniert nicht in älteren Browsern, aber Sie können problemlos js-Erweiterungen verwenden, die dies für ältere Browser ermöglichen.


quelle
1
@Layne Teil unserer Arbeit als Webentwickler / -codierer ist es, Lösungen bereitzustellen, die in so vielen Umgebungen wie möglich funktionieren. Ihre Antwort ist wirklich übertrieben für die gestellte Frage.
Desinfor
1
Das glaube ich 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 hat danach einen Abstand, obwohl es keine folgenden li-Elemente gibt.
Die Umgebung, mit der er arbeitet, sind Webbrowser. Das ist kein Overkill, um eine Lösung vorzuschlagen, die überall funktioniert. Wenn Sie sich wirklich Sorgen um den letzten Artikelrand machen, würden Sie keine Lösung vorschlagen, für deren Behebung js erforderlich wäre. Sie könnten verwenden :first-childund es würde in allem arbeiten IE7 +
disinfor
4
@disinfor Ich bin nicht einverstanden, alles ins Visier zu nehmen. Ein Teil des Stresses der Webentwicklung entsteht durch die 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 Hinweise "Wir unterstützen Ihren Browser nicht" zurückbringen, die nicht durch die Hölle gehen, damit es überall funktioniert. Und wir müssen auch unsere Kunden informieren und ihnen gegenüber bestehen. Oder wir können nichts tun und tolle Fußmatten sein.
1,21 Gigawatt
@ 1.21gigawatts "Unsere Webseiten sollten das" Wir unterstützen Ihren Browser nicht "" zurückbringen. Mhm, nein. Das nennt man Sabotage des Wettbewerbs und ist in mehreren Ländern illegal. Microsoft hat das mit Skype for Web gemacht. Skype for Web funktioniert auch in anderen Browsern einwandfrei. Google hat Youtube in Safari mehr als ein Jahr lang gestört. Google verhindert, dass Tor-Nutzer bestimmte Dienste nutzen. Ist es nicht der Sinn der "Webplattform", Apps und Dienste plattformunabhängig zu machen, da bestimmte Plattformen nicht blockiert werden? Wenn Sie das tun möchten, warum nicht stattdessen native Programme erstellen? Am Ende sind sie mächtiger.
Andreas
35

Ich würde dazu neigen, was die Tugend der IE8-Unterstützung hat.

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

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

JSFiddle

Paulie_D
quelle
27

Fügen Sie marginIhren liTags ein hinzu. Dadurch entsteht ein Abstand zwischen liund Sie können line-heightden Abstand zum Text innerhalb der liTags festlegen .

disinfor
quelle
3

Oft können Sie beim Erstellen von HTML-E-Mail-Blasts keine Stylesheets oder Style / Style-Blöcke verwenden. Alles CSS muss inline sein. In dem Fall, in dem Sie den Abstand zwischen den Aufzählungszeichen anpassen möchten, verwende ich li style = "margin-bottom: 8px;" in jedem Aufzählungszeichen. Passen Sie den Pixelwert nach Ihren Wünschen an.

Malcolm Stone
quelle
Außerdem sind die Tags für Stil / Stiltyp veraltet
Ben Slade,
2

Verwenden Sie zum Anwenden auf eine gesamte Liste

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

Dann im HTML:

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>
Tom Bartenstein
quelle
0

Das Setzen von Padding-Bottom für jede Liste unter Verwendung einer Pseudoklasse ist eine praktikable Methode. Auch die Linienhöhe kann verwendet werden. Denken Sie daran, dass Schrifteigenschaften wie Schriftfamilie, Schriftgröße usw. bei ungleichmäßigen Höhen eine Rolle spielen.

Rishi Jung
quelle
2
Können Sie ein Beispiel für Ihre Lösung nennen?
Muldec
-9

<br>Zwischenzeileneinträge <li></li>scheinen in allen von mir getesteten Webbrowsern einwandfrei zu funktionieren, bestehen jedoch den Online-W3C-CSS3-Checker nicht. Es gibt mir genau den Zeilenabstand, nach dem ich bin. Soweit es mich betrifft, werde ich es, da es zweifellos funktioniert, weiterhin verwenden, was auch immer W3C sagt, bis jemand eine gute rechtliche Alternative finden kann.

Melvyn Owen
quelle
Ihr Vorschlag funktioniert gut, wenn Sie mit der aktuellen Zeilenhöhe zufrieden sind, aber ich denke, er möchte seinen eigenen Platz angeben. Wenn Sie Zeilenumbrüche verwenden, erstellen Sie einfach neue Zeilen mit der aktuellen Zeilenhöhe.
1,21 Gigawatt
Wenn Sie eine Liste mit vielen Elementen durchlaufen, ist das Hinzufügen von br eine schreckliche Praxis. Markup ist die sicherste und sicherste Möglichkeit, Speicherplatz hinzuzufügen, wie aus den obigen Antworten hervorgeht.
SeaWarrior404