HTML, desbordamiento: desplazamiento y float

Tengo un div que encapsula muchas listas desordenadas (ul). Tengo cada ul configurado a "flotar: izquierda". Y también tengo el div principal que los contiene configurado en "overflow-x: scroll". Lo que está sucediendo es que los ul's se envuelven cuando llegan al borde de la página y no se quedan uno al lado del otro para aprovechar la propiedad de desplazamiento del div principal (las barras de desplazamiento están ahí). ¿Por qué? ¿Cómo puedo arreglar esto?HTML, desbordamiento: desplazamiento y float

Gracias por cualquier ayuda.

Fuente

2011-05-08 s2cuts

que necesita para insertar esos ULS en otro div, a la que le vas a dar width = [anchura del ul] * [número de ULS]
http://jsfiddle.net/seler/gAGKh/ o contar ancho total de ULS http://jsfiddle.net/seler/gAGKh/1/

Fuente

2011-05-08 07:57:35 seler

Crear un div interno ayuda mucho. En lugar de usar JS para calcular el ancho apropiado, encontré que establecer el ancho estático del nuevo div interno a un ancho suficientemente grande para tener en cuenta el caso más extremo no daña el diseño. Gracias Seler. – s2cuts

@ s2cuts que solo pueden funcionar si tiene un ancho de banda constante y un número de ul constante. – seler

Arreglo desagradable de javascript, la respuesta descrita por ddlshack es una solución más limpia. – user1226868

Debido a que lanzó la UL, que no existen en el documento fluya más para que no se expanda el div padre (de ahí el envoltorio.)

intente configurar una anchura explícita sobre el div padre que permite para que todos ellos existan uno al lado del otro.

TAMBIÉN, si no está borrando las UL en el div principal, entonces es más que probable que se encuentre con problemas también verticales. Asegúrese de que claras sus flotadores :)

Fuente

2011-05-08 07:09:11 Tim

La explicación era parte de mi consulta, gracias. También puedes explicar a qué te refieres con "Asegúrate de despejar tus carrozas"? – s2cuts

@ s2cuts Asegúrese de utilizar algo como [clearfix] (http://www.webtoolkit.info/css-clearfix.html) para expandir sus contenedores principales a la altura del contenido. De lo contrario, se encontrará con problemas de altura vertical similares a los problemas que tenía con el ancho horizontal. Solo un aviso. – Tim

Es necesario:

Hacer el <li> también flotan.
Establecer ancho fijo para cada <ul>.
Establezca el ancho fijo para que contenga <div>, suficiente para contener todas las listas.

Por ejemplo:

ul { width: 250px; } 
li { margin-left: 5px; } 
ul, li { float: left; } 
div { overflow-x: scroll; width: 750px; }

Test case.

Fuente

2011-05-08 07:18:04

Usted puede configurar los elementos de su lista para mostrar: inline-block, luego use white-space: nowrap. Funciona en la mayoría de los navegadores modernos.

http://jsfiddle.net/gAGKh/22/

Fuente

2012-04-21 17:02:00 ddlshack

HTML, desbordamiento: desplazamiento y float

Respuesta

Cuestiones relacionadas