barra de desplazamiento horizontal para ul

Por alguna razón, no puedo evitar que la UL y su LI se envuelvan. Quiero que el ancho de UL sea exactamente el ancho de los LI en una línea (sin envoltura) y si el UL se hace más ancho que el nav-div (800px), quiero una barra de desplazamiento dentro del navegador para poder desplazar el LI.barra de desplazamiento horizontal para ul

Probé casi cualquier cosa con pantalla, espacio en blanco, ancho y alto, pero solo puedo hacer que funcione si le doy a UL un ancho determinado. Esto, sin embargo, no es una opción, ya que la página se genera y puede contener 1-20 LI.

¿Alguien sabe cómo hacer que una barra de desplazamiento surja sin establecer el ancho de la UL?

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

Fuente

2011-09-15 Michiel

probar esto

ul { 
    white-space:nowrap; 
} 

li { 
    display:inline; 
}

Fuente

2011-09-15 14:49:24 j03w

tan simple como eso - ¡solo tenía que deshacerse del flotador! – Michiel

sí pero me tomó un tiempo antes de que pudiera llegar a eso ya sabes: P .... aparentemente los navegadores no harán que el texto se desborde si primero golpean con espacios en blanco ... o algo así, creo y esto es cierto para la última versión de OS X Firefox, Safari, Chorome – j03w

configure la pantalla li para que funcione con bloques en línea también. –

Al establecer el width en el <ul> a inherit puede utilizar el overflow property para establecer el comportamiento de desbordamiento del elemento. Con el valor scroll, todos los contenidos del elemento se desplazará (en ambas direcciones x e y) si la altura y la anchura de los contenidos desbordan la de la caja:

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

Fuente

2011-09-15 13:25:47

Advertencia: No probado

Would que no sólo desea establecer un ancho para el elemento li

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

a continuación, establecer el ancho a un ancho fijo y el desbordamiento de la UL para desplazarse?

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

Esto haría que UL se desplace cuando su li haya pasado, digamos 8, ¿eso es lo que está buscando?

Fuente

2011-09-15 13:26:19 dougajmcdonald

Usted puede utilizar display: inline-block; white-space: nowrap; de la envoltura y display: inline o display: inline-block para los niños.

Por lo tanto, se vería así: http://jsfiddle.net/kizu/98cFj/

Y, si usted necesita para apoyar IE este truco en los comentarios condicionales para permitir inline-block s en ella:

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

Fuente

2011-09-15 21:17:55 kizu

resulta que era el 'float: left' el que me causaba problemas, no aumentaba ni subía la UL, gracias por tu ayuda :) – Michiel

Añadir el siguiente regla:

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

Fuente

2012-07-11 05:48:39

barra de desplazamiento horizontal para ul

Respuesta

Cuestiones relacionadas