hacer una sola fila de divs con barras de desplazamiento horizontal

Ok, así que pensé que tenía esto solucionado con espacio en blanco: no-wrap funcionó en Chrome, pero nada más.hacer una sola fila de divs con barras de desplazamiento horizontal

que tienen algo como esto:

<div class="outer"> 
    <ul> 

     <li> 
      <div class="inner"> 
      <a href="#"><img src="eg1.jpg" /></a> 
      <br /> 
      EG1 lorem ipsum 
      </div> 
     </li> 

     <li> 
      <div class="inner"> 
      <a href="#"><img src="eg2.jpg" /></a> 
      <br /> 
      EG2 lorem ipsum 
      </div> 
     </li> 
. 
. 
. 
//etc (multiple li's) 

</ul> 

</div>

excusa la muy mala imagen, pero esta es la im efect apuntando. enter image description here

Quiero una sola fila de 'elementos' si exceden el espacio y luego deberían aparecer las barras de desplazamiento horizontales.

Espero que tenga sentido, ¿cómo puedo lograrlo?

Fuente

2012-02-29 raklos

Parece un carrusel para mí. ¿Has mirado los widgets de carrusel ofrecidos por jQuery y YUI? – Zoidberg

@Zoidberb, estaba mirando algunos caroussls, pero no pude encontrar uno que manejara el contenido, es decir, texto e imágenes en este formato con un mínimo alboroto – raklos

Mira esto http://developer.yahoo.com/yui/examples/carousel/ csl_imagentext_source.html – Zoidberg

escribe así:

.outer{ 
    width:400px; 
    overflow:auto; 
    white-space:nowrap; 
} 
.outer li{ 
    display: inline-block; 
    *display: inline;/*For IE7*/ 
    *zoom:1;/*For IE7*/ 
    vertical-align:top; 
    width:40px; 
    margin-right:20px; 
    background:red; 
    white-space:normal; 
}

Marque esta http://jsfiddle.net/ZrpHv/

Fuente

2012-02-29 12:54:57 sandeep

Bueno, sé que cada webdeveloper bueno y purista me odiará (y me odio cuando publico algo así) pero simplemente puede usar la tabla para hacer eso.

esto funciona en todos los navegadores. Sí, no es estándar, no es CSS. Pero ... la productividad es alguna vez mejor que la estándar.

También podría usar un ancho de div fijo para su contenedor (ul). y utilizar la posición izquierda de flotador para todos sus hijos

Fuente

2012-02-29 12:53:56

Es necesario poner un div horizontal masiva dentro de la div padre con overflow: auto; Esto permitirá que flote a la izquierda sin envolverse en la siguiente línea, y solo se desplazará cuando se cruce el límite del div principal.

Fuente

2012-02-29 12:56:12 w3uiguru

que busca Para establecer el ancho div.inner a algo absoluto como 64px y al hacer su li s flotador a la derecha oa la izquierda y luego establezca la propiedad overflow-x de su padre para div auto. mira esto fiddle

Fuente

2012-02-29 12:56:29

hacer una sola fila de divs con barras de desplazamiento horizontal

Respuesta

Cuestiones relacionadas