0

La cosa es que tengo un listado muy extenso, que además es a base de imágenes (no se si esto complica el asunto). Además quiero que el listado sea en horizontal.

La cosa sería que yo no quiero que haya overflow horizontal, quiero que en ese momento haga un salto de línea y así sucesivamente hasta el final de la lista. La pregunta es esa, ¿cómo hago para que haga ese salto de línea?

(En el caso que no se pueda detectando el ancho de la pantalla, ¿cómo se haría estableciendo un ancho fijo?).

No puedo adjuntar código, puesto que el problema es que no sé cómo afrontarlo. En HTML simplemente hice un listado donde cada li contiene una imagen:

<ul>
  <li><img src="imagen1.jpg" />
  <li><img src="imagen2.jpg" />
  <li><img src="imagen3.jpg" />
  ...
  <li><img src="imagenM.jpg" />
</ul>

Y el CSS no sé cómo hacerlo, se me ocurre que al contenedor de la lista hacerle un display:flex; pero ni idea de cómo afrontar eso.

2
  • 1
    Hola Carlos si no puedes afrontar el problema significa que solo buscas opiniones? Revisa Cómo preguntar
    – Jorgesys
    Commented el 20 ago. 2017 a las 20:59
  • Si no sabes cómo afrontar el código, al menos tendrás una idea de cómo quieres que se vea. Deberías añadir una imagen o algo más descriptivo con el resultado que tienes ahora y el que quieres obtener. Así como el código que tengas ahora, que aunque no esté muy avanzado, puede servir a otros usuarios para entender mejor el problema y basar su respuesta en el mismo.
    – Alvaro Montoro
    Commented el 20 ago. 2017 a las 21:26

2 respuestas 2

0

Usa los sgte:

Padre{
    display:flex; 
    flex-wrap:wrap;
}

te recomiendo que investigues e indages acerca de flexbox y como usar cada unas de sus propiedades para el diseño responsive

1
  • Okay, si es cierto
    – Risa__B
    Commented el 21 ago. 2017 a las 14:46
-1

Podrías usar la propiedad float:left, entonces se irán anidando una al lado de la otra

li {float:left }
4
  • Gracias por contestar, pero el problema no es conseguir la lista horizontal, sino que se haga el salto de línea.
    – Lleims
    Commented el 20 ago. 2017 a las 19:43
  • Disculpa gnm3000, no es exactamente lo que yo quería pero si hace algo que se acerca. MUCHISIMAS GRACIAS.
    – Lleims
    Commented el 20 ago. 2017 a las 20:04
  • 1
    Hola. Gracias por la respuesta. Podrias mirar Cómo responder para hacer tu proxima respuesta mas atractiva? Bienvenido!
    – gbianchi
    Commented el 20 ago. 2017 a las 20:51
  • 1
    @CarlosMilles con esta solución el salto de línea ocurriría automáticamente (el primer elemento que no entre en la línea saltará a la siguiente). Debes explicar mejor cómo es exactamente lo que quieres y cómo esta solución se acerca (pero no es).
    – Alvaro Montoro
    Commented el 20 ago. 2017 a las 21:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.