Rainer: umbruch in ul verhindern

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

  1. @@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'

    --
    Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
    1. Moin,

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

      Oh, da war jemand schneller :)

      Grüße Marco

  2. 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