umbruch in ul verhindern

[Rainer]

Hallo und guten Morgen ;-)

Ich habe ein Liste mit einer je nach Benutzerrechten unterschiedlichen Menge an Einträgen als Navigation.

  
<ul class="e1">  
 <li>Nav1</li>  
 <li>Nav2</li>  
 <!-- weitere in nicht bekannter Anzahl -->  
</ul>  

das CSS:

  
.e1 {list-style:none;margin:0;padding:0;}  
.e1 li {float:left;min-width:123px;height:24px;line-height:24px;padding:3px 14px 3px 14px;text-align:center;margin:0px 0px 0px 1px;}  

Nun wird bei einer entsprechenden Menge an <li> und einer zu geringen Breite des Viewport die Zeile umgebrochen. Kann man das irgendwie mit CSS verhindern. Ich weiss das dann der Scrollbalken erscheint. Eine Tabelle kommt nicht in Frage!

Gruß Rainer

[Gunnar Bittersmann]

@@Rainer:

nuqneH

Kann man das irgendwie mit CSS verhindern.

War das eine Frage.

Wenn du inline-block statt float versendest, sollte die white-space-Eigenschaft helfen. [CSS21, CSS3TEXT]

Qapla'

[misterunknown]

Moin,

Wenn du inline-block statt float versendest, sollte die white-space-Eigenschaft helfen. [CSS21, CSS3TEXT]

Oh, da war jemand schneller :)

Grüße Marco

[misterunknown]

Moin,

Nun wird bei einer entsprechenden Menge an <li> und einer zu geringen Breite des Viewport die Zeile umgebrochen.

Wenn es nicht unbedingt float:left; sein muss, dann kannst du den li-Elementen die CSS-Eigenschaft display:inline-block; geben und der ul-Liste an sich noch die Eigenschaft white-space:nowrap;
__________________________________________________________________________

ul { list-style:none;margin:0;padding:0; width:auto; white-space:nowrap;}  
ul li { display:inline-block;min-width:123px;height:24px;line-height:24px;padding:3px 14px 3px 14px;text-align:center;margin:0px 0px 0px 1px; }

__________________________________________________________________________

Beispiel

Grüße Marco