Meta:
Haga que la lista (ul y su li) sea un diseño receptivo en relación con el ancho de la pantalla.
Problema:
no se como solucionarlo
Información:
* Debe tener en cuenta la cantidad de li en cada lista ul. Los diferentes diseños receptivos dependen del ancho de la ul.
*Cada ul puede ser aleatorio de 1 a 10 li o más.
JSBin:
https://jsbin.com/xibalahave/edit?html,css,salida
¡Gracias!
.aaa ul.listlist { margin: 10px 0 16px; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; } .aaa ul.listlist li { font-size: 1.125rem; display: block; margin-right: 24px; line-height: 22px; border-radius: 12px 12px 12px 12px; padding: 8px 24px; background-color: #00FFFF; white-space: nowrap; } <div class="aaa"> <ul class="listlist"> <li>1Test 1</li> <li>1Test 2</li> <li>1Test 3</li> </ul> </div> <br /> <div class="aaa"> <ul class="listlist"> <li>1Test 1</li> <li>1Test 2</li> <li>1Test 3</li> <li>1Test 4</li> </ul> </div> <br /> <div class="aaa"> <ul class="listlist"> <li>1Test 1</li> <li>1Test 2</li> </ul> </div>Simplemente puede agregar un flexwrap: wrap; al contenedor de li , permitirá que los elementos secundarios (aquí, li ), vayan a otra línea. Los invito a conocer el flexbox y todas sus propiedades, esto es de gran ayuda para el diseño responsivo! Compruébalo aquí .
.listlist{ display: flex; flex-wrap: wrap; }