horizontale Bildlaufleiste für ul

Aus irgendeinem Grund kann ich das UL und seine LIs nicht daran hindern, sich zu verpacken. Ich möchte, dass die Breite der UL genau der Breite der LIs in einer Zeile entspricht (ohne Umbruch), und wenn die UL breiter als das Nav-Div (800 Pixel) wird, möchte ich eine Bildlaufleiste innerhalb der Nav, damit ich die LI scrollen kann.

Ich habe so ziemlich alles mit Anzeige, Leerzeichen, Breite und Höhe ausprobiert, aber ich kann es nur zum Laufen bringen, wenn ich dem UL eine bestimmte Breite gebe. Dies ist jedoch keine Option, da die Seite generiert wird und 1-20 LI’s enthalten kann.

Weiß jemand, wie man eine Bildlaufleiste erscheinen lässt, ohne die Breite des UL festzulegen?

HTML:

<div id="nav">
     <ul id="navbuttons">
          <li>Some text</li>
          <li>Some text</li>
          ...
     </ul>
</div>

CSS:

div#nav
{
    height: 100px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

div#nav ul li
{
    margin-right: 15px;
    float: left;
    font-size: 12px;
    list-style-type: none;
}

Versuche dies

ul {
   white-space:nowrap;
}

li {
   display:inline;
}

Sie können verwenden display: inline-block; white-space: nowrap; für die Verpackung u display: inline oder display: inline-block für die Kinder.

Das würde also so aussehen: http://jsfiddle.net/kizu/98cFj/

.navbuttons {
    display: inline-block;
    overflow: auto;
    overflow-y: hidden;
    max-width: 100%;
    margin: 0 0 1em;
    white-space: nowrap;
    background: #AAA;
}

.navbuttons LI {
    display: inline-block;
    vertical-align: top;
}

Und wenn Sie IE unterstützen müssen, fügen Sie diesen Hack in bedingte Kommentare hinzu, um ihn zu aktivieren inline-blocksteht drin:

.navbuttons,
.navbuttons LI {
    display: inline;
    zoom: 1;
}

Achtung: Ungetestet

Möchten Sie nicht nur eine Breite für das li-Element festlegen?

div#nav ul li {    
   margin-right: 15px;     
   float: left;     
   font-size: 12px;     
   list-style-type: none;
   width: 100px;
}

Und dann die Breite auf eine feste Breite setzen und auf dem UL überlaufen, um zu scrollen?

div#nav ul {
    width: 800px;
    overflow: scroll;
}   

Dies würde dazu führen, dass Sie UL scrollen, wenn Ihre Lis über 8 hinausgehen. Ist es das, wonach Sie suchen?

Durch die Einstellung der width auf der <ul> zu inherit du kannst den … benutzen overflow Eigentum um das Überlaufverhalten des Elements einzustellen. Mit dem Wert scrollwird der gesamte Inhalt des Elements (sowohl in x- als auch in y-Richtung) gescrollt, wenn die Höhe und die Breite des Inhalts die der Box überschreiten:

div#nav ul
{
    overflow: scroll;
    width: inherit;
    height: inherit;
}

Fügen Sie die folgende Regel hinzu:

div#nav ul {
   overflow-x: hidden;
   overflow-y: scroll;
   white-space: nowrap;
}