Seite 1 von 1
Li Elemente automatisch auf breite verteilen
Verfasst: Di 9. Jun 2009, 17:32
von Jazzid
Hallo,
ich stelle mir gerade folgende Frage.
Ist es möglich mehrere <li> Elemente auf einer vorgegebenen Breite zu verteilen?
So nach dem Motto: <UL> ist 800px breit. Wenn ich 8 <li> Elemente habe ist jedes 100px breit, wenn es nur 4 sind dann ist jedes 200px breit...?
Mir fällt nichts ein wie es funktionieren sollte. Auch mit Prozenten geht das nicht, da die Anzahl der Elemente ja immer unterschiedlich sein kann.
Vielleicht weiss jemand ne Lösung.
Re: Li Elemente automatisch auf breite verteilen
Verfasst: Di 9. Jun 2009, 17:46
von we:willRockYou
Mit % geht das nicht. Du kannst natürlich absolute Werte in z.B. px vergeben. Entwerder per PHP auf dem Server oder dann auf dem Client per JavaScript, wobei das denn mit z.b. jQuery recht leicht sein dürfte.
Code: Alles auswählen
$("ul li").each(function(){
$(this).css("width",Math.round($(this).parent().width()/$(this).parent().find("li").length)+"px");
})
So als Ansatz zum spielen. Das Dimensions-Plugin wirst Du dafür brauchen. Und Du wirst noch einen Filter mit .is(":last") bzw. .not(":last") einbasteln müssen um den letzen Punkt etwas grösser/kleiner zu machen, denn sonst wirst Du nicht immer auf 100% Breite kommen.
Edit: Da ich gerade sehe dass das hier im CSS-Forum steht -> Das geht definitiv nicht mit CSS.
Re: Li Elemente automatisch auf breite verteilen
Verfasst: Fr 21. Jun 2013, 11:24
von Carrear
habe ich eine bessere Lösung:
Code: Alles auswählen
ul {
width: 100%;
text-align: justify;
list-style: none;
}
li {
display: inline-block;
}
li.alignfix {
padding-left: 100%;
height: 0;
}
Code: Alles auswählen
<ul>
<li>Eins</li>
<li>Zwei</li>
<li>Drei</li>
<li>Vier</li>
<li class="alignfix"> </li>
</ul>
Re: Li Elemente automatisch auf breite verteilen
Verfasst: So 23. Jun 2013, 22:39
von bolleone
...das geht scho auch mit css:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/. Man braucht dann nur fallbacks für ältere ie-Versionen.