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.
Li Elemente automatisch auf breite verteilen
Li Elemente automatisch auf breite verteilen
we:rocks...
-
- Senior Member
- Beiträge: 919
- Registriert: Fr 22. Mai 2009, 21:40
- Wohnort: Berlin
- Kontaktdaten:
Re: Li Elemente automatisch auf breite verteilen
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.
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.
Code: Alles auswählen
$("ul li").each(function(){
$(this).css("width",Math.round($(this).parent().width()/$(this).parent().find("li").length)+"px");
})
Edit: Da ich gerade sehe dass das hier im CSS-Forum steht -> Das geht definitiv nicht mit CSS.
EOF; //totally retired
- Carrear
- webEdition Partner
- Beiträge: 646
- Registriert: Do 17. Jan 2013, 03:02
- Wohnort: Hannover
- Kontaktdaten:
Re: Li Elemente automatisch auf breite verteilen
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>
-
- Senior Member
- Beiträge: 601
- Registriert: So 4. Jul 2004, 00:24
- Wohnort: Düsseldorf
- Kontaktdaten:
Re: Li Elemente automatisch auf breite verteilen
...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.
multimediadesign.net · Atelier für Kommunikation
Grimmstr. 3 · 40235 Düsseldorf
Telefon ++49-211-4981791 · Telefax ++49-211-4981792
http://www.multimediadesign.net · bolle@multimediadesign.net
Grimmstr. 3 · 40235 Düsseldorf
Telefon ++49-211-4981791 · Telefax ++49-211-4981792
http://www.multimediadesign.net · bolle@multimediadesign.net
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 3 Gäste