LI-Element mit display:inline-block auf 100% Breite

[raw-venture-ad]

Hallo zusammen

ich habe eine UL mit beliebig vielen LI-Elementen die mit display:inline-block aneinander gereiht sind.

Die UL befindet sich in einem DIV mit 500px Breite. Jetzt möchte ich es gerne hinkriegen, dass das letzte LI-Element eine Breite von 100% besitzt und damit den Rest der UL bzw. des DIV ausfüllt.

Das dumme ist, wenn ich dem letzten LI eine Breite von 100% gebe, dann steht dieses immer in einer neuen Zeile. Gerade das wollte ich aber mit display:inline-block ausschließen.

Damit man sich mein Problem in etwa vorstellen kann hier ein Link zum Anschauen:

Beispiel mit falscher und richtiger Darstellung

Bei der richtigen Darstellung habe ich getrickst, indem ich die Breite des input Feldes exakt angegeben habe.

Ich denke Ihr seht worauf ich hinaus will. Ich will das die Namen wie bei Outlook hintereinander stehen und man nach den bisherigen einen neuen eintippen kann.

Gibt es für mein Ziel eine semantisch korrekte Möglichkeit ohne zu tricksen? (Bevor ich trickse packe ich das Textfeld lieber woanders hin)

Vielen Dank und Beste Grüße !

Raw

[MudGuard]

Hi,

Die UL befindet sich in einem DIV mit 500px Breite. Jetzt möchte ich es gerne hinkriegen,

dass das letzte LI-Element eine Breite von 100% besitzt und damit den Rest der UL bzw. des DIV ausfüllt.

100% ist die volle Breite, also 500px, nicht den Rest.

Das dumme ist, wenn ich dem letzten LI eine Breite von 100% gebe, dann steht dieses immer in einer neuen Zeile. Gerade das wollte ich aber mit display:inline-block ausschließen.

Wenn das Element die gesamte Breite hat, kann es nicht mehr neben den anderen stehen, dazu ist es ja zu breit.

cu,
Andreas

[Gernot Back]

Hallo raw,

warum verpasst du deinen Li-Elementen nicht allesamt float:left und stellst nur das letzte stattdessen auf display:block?

Gruß Gernot

[raw-venture-ad]

Hallo raw,

warum verpasst du deinen Li-Elementen nicht allesamt float:left und stellst nur das letzte stattdessen auf display:block?

Gruß Gernot

Vielen Dank für die Idee.

Bringt nur leider nicht den gewünschten Effekt.

Mir ist aber noch etwas Anderes eingefallen, und zwar ist die Usability gefährdet wenn der restliche Platz zufällig sehr gering ist. Dann ist das Textfeld effektiv vielleicht nur 10 Pixel groß. Dann müsste wieder mit Javascript gearbeitet werden, und das möchte ich nicht unbedingt.

Ich denke also, dass ich das Textfeld fest irgendwo platzieren werde.

Oder hat Jemand vielleicht noch eine andere zündende Idee?

[ChrisB]

Hi,

warum verpasst du deinen Li-Elementen nicht allesamt float:left und stellst nur das letzte stattdessen auf display:block?

Bringt nur leider nicht den gewünschten Effekt.

Inputfelder reagieren nicht so auf display:block, wie "normale" Elemente - Formularfeldformatierung ist leider nicht immer in allen Browser zufriedenstellend umsetzbar.

Mir ist aber noch etwas Anderes eingefallen, und zwar ist die Usability gefährdet wenn der restliche Platz zufällig sehr gering ist. Dann ist das Textfeld effektiv vielleicht nur 10 Pixel groß. Dann müsste wieder mit Javascript gearbeitet werden, und das möchte ich nicht unbedingt.

Oder eine min-width angegeben werden. (Sofern die Browser das bei Formularelementen korrekt umsetzen.)

Dann müsste wieder mit Javascript gearbeitet werden, und das möchte ich nicht unbedingt.

Warum nicht?
Es ist ein kleiner Bonus, dass das ganze damit exakt zo aussieht, wie gewünscht.
Und ohne JavaScript sieht es dann halt nicht exakt so aus, sondern leicht anders - so what.

MfG ChrisB