Li Elemente automatisch auf breite verteilen

Fragen zu CSS.
Fragen zu we:Tags bitte im Forum webEdition Templates erstellen (we:Tags) posten.
Jazzid
Member
Beiträge: 95
Registriert: Mi 1. Feb 2006, 21:30
Wohnort: Karlsruhe

Li Elemente automatisch auf breite verteilen

Beitragvon Jazzid » Di 9. Jun 2009, 17:32

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.
we:rocks...

we:willRockYou
Senior Member
Beiträge: 919
Registriert: Fr 22. Mai 2009, 21:40
Wohnort: Berlin
Kontaktdaten:

Re: Li Elemente automatisch auf breite verteilen

Beitragvon we:willRockYou » Di 9. Jun 2009, 17:46

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.
EOF; //totally retired

Benutzeravatar
Carrear
webEdition Partner
webEdition Partner
Beiträge: 643
Registriert: Do 17. Jan 2013, 03:02
Wohnort: Hannover

Re: Li Elemente automatisch auf breite verteilen

Beitragvon Carrear » Fr 21. Jun 2013, 11:24

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">&nbsp;</li>
</ul>

bolleone
Senior Member
Beiträge: 579
Registriert: So 4. Jul 2004, 00:24
Wohnort: Düsseldorf
Kontaktdaten:

Re: Li Elemente automatisch auf breite verteilen

Beitragvon bolleone » So 23. Jun 2013, 22:39

...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


Zurück zu „CSS“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast