CSS problema de desplazamiento horizontal

ProblemaCSS problema de desplazamiento horizontal

enter image description here

necesito el contenido a la fuerza para desplazarse en el eje X, no hacia abajo el eje y.

HTML

Sé que esto está mal formateado pero ha generado de forma dinámica y no tiene ningún espacio en blanco.

<div class="folderWrapper" id="folderContainer"><div class="folderBox ui-droppable folderBoxSel" onclick="folderSelected(0)" id="fBox0"><div class="counter" id="fCount0">4</div><div class="folderName">Unsorted</div></div><div class="folderBox ui-droppable" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div></div>

formateado muy bien con caja interior una carpeta:

<div class="folderWrapper" id="folderContainer"> 
    <div class="folderBox ui-droppable folderBoxSel" onclick="folderSelected(0)" id="fBox0"> 
     <div class="counter" id="fCount0">4</div> 
     <div class="folderName">Unsorted</div> 
    </div> 
</div>

CSS

.folderWrapper{ 
    overflow-x:scroll; 
    overflow-y:hidden; 
    height:85px; 
    white-space:nowrap; 
    margin-bottom:5px; 
} 
.folderBox{ 
    float:left; 
    background-image:url(../images/artworking/folder.png); 
    background-position:center top; 
    background-repeat:no-repeat; 
    width:85px; 
    height:55px; 
    position:relative; 
    padding:5px; 
    z-index:4; 
    white-space:nowrap; 
} 
.folderBox:hover{ 
    cursor: pointer; 
}

Gracias si alguien puede ayudar!

Editar

respuesta de Bazzz funciona en todos los navegadores excepto modo de compatibilidad de IE (por desgracia tiene que ser compatible) que da el siguiente aspecto:

enter image description here

Con IE Hack:

enter image description here

Fuente

2011-02-03 Tom Gullen

inline-block uso en su lugar de FolderBox float:left

espacios en blanco: no-wrap no funciona en los elementos flotantes, que funciona en los elementos en línea.

para IE 7 me encontré con un pequeño programa que podría ayudarle a cabo:

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

probar esto css:

.folderBox{ 
display: inline-block; 
zoom: 1; 
*display: inline; 
}

más reciente edición:

Este css funciona en el modo de compatibilidad IE 8 (estándar IE7):

.folderWrapper{ 
    overflow-x: scroll; 
    overflow-y: hidden; 
    height:85px; 
    width: 300px; /* not really your css, I used it in my test case */ 
    white-space:nowrap; 
} 
.folderBox{ 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
    background-image:url(../images/artworking/folder.png); 
    background-position:center top; 
    background-repeat:no-repeat; 
    width:85px; 
    height:55px; 
}

Creo que el problema de desbordamiento en IE7 se encuentra en el position:relative que utiliza. Lo eliminé, y algunos otros CSS y ahora funciona.

Fuente

2011-02-03 11:00:15 Bazzz

Perfecto, muchas gracias! –

De nada :) – Bazzz

Lo siento Baz tuvo que eliminarlo, en el modo de compatibilidad IE está apareciendo realmente funky actualizar la pregunta para mostrar –

me gustaría crear HTML como:

<div id="folderWrapper"> 
    <ul id="folderList"> 
     <li class="folderBox">...</li> 
     <li class="folderBox">...</li> 
     <li class="folderBox">...</li> 
    </ul> 
</div>

y CSS:

#folderWrapper { 
    position:relative; 
    z-index:1; 
    width:300px; 
    overflow:hidden; 
} 
#folderList { 
    position:absolute; 
    z-index:2; 
    width:20000px; 
} 
.folderBox { 
    float:left; 
}

y luego usar una barra de desplazamiento basado en jQuery dentro #folderWrapper: http://www.net-kit.com/jquery-custom-scrollbar-plugins/

me gusta JScrollPane.

Fuente

2011-02-03 13:24:45 sunn0

CSS problema de desplazamiento horizontal

Respuesta

Cuestiones relacionadas