css, Abstand von li-elemt mit Umbruch vertikal regulieren

[bari]

Guten Abend an die Webgemeinde,

Ich finde wieder mal etwas nicht heraus. Mit folgendem Code formatiere ich diese Liste hier im hellen Feld rechts unten.

  
div ul.listentext-ru {  
list-style-type: disc;  
font-weight: normal;  
font-size: .9em;  
letter-spacing: .20em;  
line-height: 1.5em;  
margin: 20px 0;  
}  

Um die Zeilen von untereinander etwas zu enfernen, hatte ich das so gemacht, das mir der Validator angekreidet hat
<li>...</li><br>
<li>...</li><br>
(die br sind hier nicht mehr im code). Wie kann ich jetzt den Abstand zwischen den listen-Zeilen regulieren? Die Zeilen werden umgebrochen, wie man sehen kann. Ein einzelnes li-element soll mit dem Umbruch nicht vertikal auseinandergezogen werden, sondern erst das nächste li-element wieder.

Kann mir da jemand einen guten Tipp geben?

danke, bari.

[M.]

Mahlzeit,

Wie kann ich jetzt den Abstand zwischen den listen-Zeilen regulieren?

Indem du li entweder ein padding oder margin zuweist. Ich seh das Problem nicht.

[bari]

Mahlzeit,

Wie kann ich jetzt den Abstand zwischen den listen-Zeilen regulieren?

Indem du li entweder ein padding oder margin zuweist. Ich seh das Problem nicht.

das gelang mir bisher nicht. Es verschob sich jeweils die ganze ul als Einheit nach unten, oben, re, oder li, also alle li-elemente zusammen "parallel" wenn man so will.

Wenn die li-elemente nicht umgebrochen werden müssen, also auf einer Zeile Platz haben, oder wenn der Umbruch mit white-space wrap verhindert wird, so konnte ich bei ul mit line-height den Abstand zwischen den Zeilen verändern. Irgendwie habe ich das Gefühl, dass das nicht der richtige Weg ist, doch einen andern fand ich nicht und der Zweck ist erfüllt (das bezieht sich hier auf die class .anker (die gelben li-elemente) mit folgender Formatierung:

  
.mypictures .anker {  
padding: 10px 0;  
margin: 0 -10px 0; }  
  
.mypictures .anker li {  
list-style: none;  
display: inline;  
white-space: nowrap;  
margin: 10px;  
line-height: 2em;  
font-size: 1.3em; }  

aber eben, line-height vergrössert auch den Abstand des umgebrochenen von dessen nicht ungebrochenen li-element-teils.

bari.

[Quincunx]

Halo bari,

.mypictures .anker {
    padding: 10px 0;
    margin: 0 -10px 0;
}
.mypictures .anker li {
    list-style: none;
    display: inline;
    white-space: nowrap;
    margin: 10px;
    line-height: 2em;
    font-size: 1.3em;
}

  
so auf die schnelle: `display: inline;`{:.language-css} und `margin: 10px;`{:.language-css} das wird nichts.  
Versuchs mit `display: inline-block;`{:.language-css}  
  
gute nacht qx

[bari]

Halo bari,

.mypictures .anker {

padding: 10px 0;
    margin: 0 -10px 0;
}
.mypictures .anker li {
    list-style: none;
    display: inline;
    white-space: nowrap;
    margin: 10px;
    line-height: 2em;
    font-size: 1.3em;
}

>   
> so auf die schnelle: `display: inline;`{:.language-css} und `margin: 10px;`{:.language-css} das wird nichts.  
> Versuchs mit `display: inline-block;`{:.language-css}  
>   
> gute nacht qx  
  
Ja, vielen Dank euch beiden erstmal, schaue mir das morgen an.  
  
Gute Nacht  
bari.

[bari]

Guten Tag qx

.mypictures .anker {

padding: 10px 0;
    margin: 0 -10px 0;
}
.mypictures .anker li {
    list-style: none;
    display: inline;
    white-space: nowrap;
    margin: 10px;
    line-height: 2em;
    font-size: 1.3em;
}

>   
> so auf die schnelle: `display: inline;`{:.language-css} und `margin: 10px;`{:.language-css} das wird nichts.  
> Versuchs mit `display: inline-block;`{:.language-css}  
  
genau nach dem habe ich gesucht. Jetzt brauch ich das inline:nowrap nicht mehr, und mit margin: 10px 5px; (zb) kann ich die Abstände zwischen den einzelnen li-elementen vertikal 10px (wenn es >1 zeile gibt) und horizontal 5px einstellen.  
Und für die Tabelle in Textform verwende ich list-item, das mir noch die bullets liefert.  
  
besten Dank,  
bari.

[M.]

Mahlzeit,

das gelang mir bisher nicht. Es verschob sich jeweils die ganze ul als Einheit nach unten, oben, re, oder li, also alle li-elemente zusammen "parallel" wenn man so will.

Du sollst dem _LI_ padding oder margin zuweisen. Und ja, das funktioniert, ich habe es im Developer-Tool unter Chrome auf deiner Seite getestet.

Bei deinem Code ist für das li nirgends ein Abstand gesetzt.