html - quitar - scroll horizontal css

Barra de desplazamiento horizontal para ul

Question

Por alguna razón, no puedo evitar que el UL y sus LI se envuelvan. Quiero que el ancho del UL sea exactamente el ancho del LI en una línea (sin ajuste) y si el UL se vuelve más ancho que el nav-div (800px), quiero una barra de desplazamiento dentro del navegador para que pueda desplazar el LI.

Intenté casi cualquier cosa con pantalla, espacios en blanco, ancho y alto, pero solo puedo hacer que funcione si le doy a la UL un cierto ancho. 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 aparezca una barra de desplazamiento sin configurar el ancho del 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;
}

Answer 1

Advertencia: no probado

¿No solo 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;
}

¿Y luego establecer el ancho a un ancho fijo y el desbordamiento en el UL para desplazarse?

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

Esto causaría que UL se desplace cuando sus li pasaron, digamos 8, ¿es eso lo que está buscando?

Answer 2

Agregue la siguiente regla:

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

Answer 3

Al establecer el width en <ul> para inherit , puede usar la propiedad de overflow para establecer el comportamiento de desbordamiento del elemento. Con el scroll valores, todos los contenidos del elemento se desplazarán (en las direcciones x e y) si la altura y el ancho de los contenidos se desbordan a los de la caja:

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

Answer 4

Puedes usar display: inline-block; white-space: nowrap; display: inline-block; white-space: nowrap; para el envoltorio y la display: inline o display: inline-block en display: inline-block para los niños.

Entonces, se vería así: http://jsfiddle.net/kizu/98cFj/

Y, si necesita admitir IE, agregue este truco en comentarios condicionales para habilitar inline-block en inline-block en él:

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

Answer 5

prueba esto

ul {
white-space:nowrap;
}
li {
display:inline;
}