html - make - div slider horizontal
Div con desplazamiento horizontal solamente (4)
overflow-x: scroll;
overflow-y: hidden;
EDITAR:
Esto funciona para mi:
<div style=''overflow-x:scroll;overflow-y:hidden;width:250px;height:200px''>
<div style=''width:400px;height:250px''></div>
</div>
Tengo un DIV de ancho fijo que contiene una tabla con muchas columnas, y necesito permitir al usuario desplazar la tabla horizontalmente dentro del DIV.
Esto debe funcionar solo en IE6 e IE7 (aplicación cliente interna).
Lo siguiente funciona en IE7:
overflow-x: scroll;
¿Alguien puede ayudar con una solución que también funciona en IE6?
No pude conseguir que la respuesta seleccionada funcionara, pero después de investigar un poco, descubrí que el desplazamiento horizontal div debe tener white-space: nowrap en el css.
Aquí está el código de trabajo completo:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Something</title>
<style type="text/css">
#scrolly{
width: 1000px;
height: 190px;
overflow: auto;
overflow-y: hidden;
margin: 0 auto;
white-space: nowrap
}
img{
width: 300px;
height: 150px;
margin: 20px 10px;
display: inline;
}
</style>
</head>
<body>
<div id=''scrolly''>
<img src=''img/car.jpg''></img>
<img src=''img/car.jpg''></img>
<img src=''img/car.jpg''></img>
<img src=''img/car.jpg''></img>
<img src=''img/car.jpg''></img>
<img src=''img/car.jpg''></img>
</div>
</body>
</html>
para desplazamiento horizontal tenga en cuenta estas dos propiedades:
overflow-x:scroll;
white-space: nowrap;
Ver enlace de trabajo: haz clic en mí
HTML
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
CSS
div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}
La solución es bastante directa. Para garantizar que no afecte el ancho de las celdas de la tabla, apagaremos el espacio en blanco . Para asegurarnos de obtener una barra de desplazamiento horizontal, activaremos overflow-x . Y eso es más o menos:
.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
Puede ver el resultado final aquí , o en la animación a continuación. Si la tabla determina la altura de su contenedor, no debería necesitar establecer explícitamente overflow-y como hidden . Pero entiende que también es una opción.
