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