it-swarm.com.de

horizontale Bildlaufleiste für ul

Aus irgendeinem Grund kann ich nicht verhindern, dass die ULs und ihre LIs sich umwickeln. Ich möchte, dass die Breite des ULs genau der Breite der LIs in einer Zeile entspricht (ohne Umhüllung) und wenn der UL breiter als die UL wird nav-div (800px), ich möchte eine Bildlaufleiste innerhalb der Navigationsleiste, damit ich das 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 LIs enthalten kann.

Weiß jemand, wie eine Bildlaufleiste angezeigt wird, ohne die Breite des ULs einzustellen?

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;
}
18
Michiel

versuche dies

ul {
   white-space:nowrap;
}

li {
   display:inline;
}
45
j03w

Sie können display: inline-block; white-space: nowrap; für den Wrapper und display: inline oder display: inline-block für die untergeordneten Elemente verwenden.

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

Und wenn Sie IE unterstützen müssen, fügen Sie diesen Hack in bedingten Kommentaren hinzu, um inline-blocks darin zu aktivieren:

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

Fügen Sie die folgende Regel hinzu:

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

Indem Sie width für <ul> auf inherit setzen, können Sie die overflow-Eigenschaft verwenden, um das Überlaufverhalten des Elements festzulegen. Mit dem Wert scroll scrollen alle Elemente des Elements (sowohl in x- als auch in y-Richtung), wenn die Höhe und Breite des Inhalts die der Box überschreiten:

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

Vorbehalt: Nicht getestet

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 einstellen und den UL überlaufen, um zu scrollen?

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

Dies würde dazu führen, dass Sie scrollen, wenn Ihr Vorbei an 8 vorbeigegangen ist. Ist es das, was Sie suchen?

0
dougajmcdonald