Breite-Problem

[colex]

HI

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

  
<ul>  
       <li style="display:inline">NAME</li>  
       <li style="display:inline">ALTER</li>  
</ul>  

<ul> hat benutzt dagegen den komplett zur Verfügung stehenden Platz.
Die beiden <li>'s nutzen aber nur soviel, wie deren Inhalt groß ist.

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.

[Felix Riesterer]

Liebe(r) colex,

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

indem beide eine breite von 50% bekommen (margin, padding und border mit 0px vorausgesetzt).

<ul>
       <li style="display:inline">NAME</li>
       <li style="display:inline">ALTER</li>
</ul>

  
Du möchtest keine inline-Styles! Du möchtest IDs oder Klassen vergeben und darüber aus einem externen Stylesheet darauf zugreifen, oder nicht?  
  

> <ul> hat benutzt dagegen den komplett zur Verfügung stehenden Platz.  
> Die beiden <li>'s nutzen aber nur soviel, wie deren Inhalt groß ist.  
  
Das ist bei auf display:inline geschalteten Elementen immer so. Sie verhalten sich im Prinzip wie ein Textbuchstabe oder ein Smiley-Bildchen.  
  

> 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.  
  
Das verstehe ich jetzt nicht so wirklich. Eine prozentuale Angabe orientiert sich doch am maximal verfügbaren Platz... Und Deine <ul> hat ihre Breite woher? Und wie sieht diese Breite aus?  
  
Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/),  
  
Felix Riesterer.

[D.R.]

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

[Cheatah]

Hi,

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

wenn Du die Anzahl der <li>-Elemente nicht kennst: Indem Du sie zu table-cell-Elementen machst.

<ul> hat benutzt dagegen den komplett zur Verfügung stehenden Platz.
Die beiden <li>'s nutzen aber nur soviel, wie deren Inhalt groß ist.

So ist es für inline-Elemente definiert, ja.

Cheatah