Salto de linea con css
3 seguidores
Buenas, estoy intentando que en una lista cuando llegue a la opción 10 haga un salto de linea y el resto de número continúe hasta el 20 en el que vuelva hacer otro salto de linea..... Y así sucesivamente (Como si en el html metiese un <br>)
Alguien le ha surgido un caso como este?
Un saludo, y muchas gracias de antemano
proyectoweb72
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li><br>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
rafael_o Mod Plus
No, no. No uses br.
Utiliza nth child que ya tienes.
Loquillo
Muchas gracias, la solución del br no es lo que busco, y el padding-bottom tampoco funciona, la única opción que he probado fue añadirle display:block el problema es que el 10, 20 me los deja justo debajo, pero también me deja debajo del 11 al 19 y así sucesivamente si se le añaden más opciones.....
phpninja
Añade un <li></li> vacío cada 10 "li"s. Fiddle: https://jsfiddle.net/go9ptdbm/1/
PhpNinja - Arreglamos lo que otros simplemente no pueden.
www.phpninja.info
Loquillo
Muchas gracias Ninja!! funciona a la perfección
phpninja
😎
Por cierto, nunca había visto usar una lista así. Para qué lo estás usando?
smalonso Mod
@loquillo-1 Te dejo la solución Pure CSS, simplemente añadiedo un display:block en el :after de cada décimo elemento.
És una iteración de lo que ha planteado @phpninja añadiendo li's vacíos con un comportamiento en bloque, con la diferencia que sustituyo el li vacío del HTML por el elemento :after en CSS. Lo que hace :after es pintar un elemento en el DOM que no tienes en el markup y te mantendrá el código más limpio.
👉 jsfiddle.net/oL1sd68c
rafael_o Mod Plus
El código que puse por supuesto que funciona:
https://jsfiddle.net/406ybgan/