D.R.: Breite-Problem

Beitrag lesen

Hallo,

wie kann ich es anstellen, dass die beiden <li>'s sich die Gesamtbreite von <ul> teilen und den ganzen Platz einnehmen?

Leider kann ich nicht mit width arbeiten, da sich die Breite an bestimmten übergeordneten Elementen anpassen soll, da jeder User die Liste in einer anderen Breite sieht.

Du meinst, du kannst nicht mit absoluten Breitenangaben (z.B. px) arbeiten,…

Statt dessen kannst du aber %-Werte verwenden. Wenn die <li>s z.B. keinem Abstand nach rechts/links haben, kannst du sie einfach 50% groß machen. Ansonsten musst du halt etwas runter gehen.
Das Ganze funzt natürlich nur, wenn du float statt display:inline verwendest.

Folgendes sollte eigentlich ganz gut funktionieren:

  
<ul>  
       <li style="float:left;width:45%;border:1px solid red">NAME</li>  
       <li style="float:left;width:45%;border:1px solid red">ALTER</li>  
</ul>

(die inline-Stile sind in die zentrale CSS-Datei zu übertragen)

Das nutzt zwar nicht die Ganze Fensterbreite aus, aber wenigstens den größten Teil davon.
Alternativ könntest du auch das box-modell umschalten, was aber noch sehr riskant sein könnte.

IE: Quirksmode
FF: CSS-Eigenschaft „-moz-box-sizing:border-box;“
andere Browser (z.B. Opera):
 CSS-Eigenschaft „box-sizing:border-box;“

dann könntest du immer 50% angeben, sofern es keinen margin gibt. Aber auch der funzt mit %-Angaben, sodass du bei einem 1%-margin z.B. einfach 49% einträgst.

mfg. Daniel