Cómo dividir la lista en un solo ul en 3 columnas

Preguntas HTML
⏰ 5 minutos de lectura

Tengo una lista de ul has dentro. ¿Es posible dividir la lista en 3 columnas?

La estructura de mi html es así:

 <ul>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>

     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>

     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
 </ul>

Problema: No puedo editar directamente la página y dividir la lista en 3 ul. Debo editarlo a través de CSS.

Producción: El resultado final debe tener 3 columnas. Y editado a través de CSS

Por favor, ayúdame.

avatar de usuario de monkeyinsight
visión del mono

ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

  • Al menos en WebKit, esto eliminará las viñetas de la lista.

    – Ry-
    ♦

    12 de septiembre de 2014 a las 3:06

  • Hola. Intenté tu respuesta pero no funciona para Mozilla y Chrome.

    – Redshot

    12 de septiembre de 2014 a las 3:06

  • @minitech li:before {content: '● ';font-size: 10px;} 🙂

    – visión de mono

    12 de septiembre de 2014 a las 3:13

  • Si utiliza: list-style-position: inside; Verás las balas.

    –Jeff Mattson

    3 sep 2017 a las 19:32

  • ¿Soy el único que dijo “WOAH, esto es ASÍ de simple?”. Iba a calcular el número de columnas, hacer algunas cosas difíciles de html/css, etc.

    – Víctor

    27 mayo 2018 a las 16:50

Avatar de usuario de Mohammad Usman
mohammad usman

CSS3 flexbox también puede hacer esto también:

ul {
  flex-direction: column;
  flex-wrap: wrap;
  display: flex;
  height: 100vh;
}
ul li {
  flex: 1 0 25%;
}

Arriba css creará el siguiente diseño:

+--------------------+
|  01  |  05  |  09  |
+--------------------+
+--------------------+
|  02  |  06  |  10  |
+--------------------+
+--------------------+
|  03  |  07  |  11  |
+--------------------+
+--------------------+
|  04  |  08  |  12  |
+--------------------+

* {box-sizing: border-box;}

body {
  margin: 0;
}

.list {
  flex-direction: column;
  list-style: none;
  flex-wrap: wrap;
  height: 100vh;
  display: flex;
  padding: 0;
  margin: 0;
}

.list li {
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  flex: 1 0 25%;
  padding: 10px;
  color: #fff;
}

.col1 {
  background: blue;
}

.col2 {
  background: orange;
}

.col3 {
  background: green;
}
<ul class="list">
  <li class="col1">Test 1</li>
  <li class="col1">Test 2</li>
  <li class="col1">Test 3</li>
  <li class="col1">Test 4</li>

  <li class="col2">Test 5</li>
  <li class="col2">Test 6</li>
  <li class="col2">Test 7</li>
  <li class="col2">Test 8</li>

  <li class="col3">Test 9</li>
  <li class="col3">Test 10</li>
  <li class="col3">Test 11</li>
  <li class="col3">Test 12</li>
</ul>

En caso de que desee el siguiente diseño:

+-----------------------+
|  1  |  2  |  3  |  4  |
+-----------------------+
+-----------------------+
|  5  |  6  |  7  |  8  | 
+-----------------------+
+-----------------------+
|  9  |  10 |  11 | 12  |
+-----------------------+

puedes usar el siguiente css:

ul {
  flex-wrap: wrap;
  display: flex;
}
ul li {
  flex: 1 0 25%;
}

* {box-sizing: border-box;}

body {
  margin: 0;
}

.list {
  list-style: none;
  flex-wrap: wrap;
  display: flex;
  padding: 0;
  margin: 0;
}

.list li {
  border-bottom: 1px solid #fff;
  flex: 1 0 25%;
  padding: 10px;
  color: #fff;
}

.list li:nth-child(4n + 1) {
  background: blue;
}

.list li:nth-child(4n + 2) {
  background: orange;
}

.list li:nth-child(4n + 3) {
  background: green;
}
.list li:nth-child(4n + 4) {
  background: purple;
}
<ul class="list">
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>

  <li>Test 5</li>
  <li>Test 6</li>
  <li>Test 7</li>
  <li>Test 8</li>

  <li>Test 9</li>
  <li>Test 10</li>
  <li>Test 11</li>
  <li>Test 12</li>
</ul>

Avatar de usuario de Devin
Devin

si no le gusta la respuesta del recuento de columnas (a mí también me gusta, pero es cierto que el soporte es “dudoso”, especialmente en IE), simplemente puede hacer esto:

ul li{width:33.333333%; float:left;}

o incluso

ul{display:block;}
ul li{display:inline-block;}

Pero de esta manera tendrás 3 columnas aunque en diferente orden: en lugar de 

1   4   7
2   5   8
3   6   9

tendras

1   2   3
4   5   6
7   8   9

así que considere los pros y los contras.

Personalmente, usaría la respuesta de monkeyinsight, pero si necesita otra opción, aquí tiene

  • Gracias. En mi opinión, el enfoque ul{display:block;} ul li{display:inline-block;} es la mejor opción.

    –Leonardo

    26 de marzo de 2018 a las 22:09

  • ¿Qué hace la coma en width:33,333333%? ¿Las comas son intercambiables con los puntos en números/porcentajes?

    – Empleado

    1 de enero de 2019 a las 5:50

  • es un error tipográfico de autocorrección, en mi idioma y configuración regional (español, Argentina), las comas reemplazan los puntos

    – Devin

    2 de enero de 2019 a las 2:00

Usando la cuadrícula CSS

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<div class="cont">
    <ul class="list">
        <li class="list-item">*</li>
        <li class="list-item">*</li>
        <li class="list-item">*</li>    
        <li class="list-item">*</li>
        <li class="list-item">*</li>
        <li class="list-item">*</li>    
        <li class="list-item">*</li>
        <li class="list-item">*</li>
        <li class="list-item">*</li>    
    </ul>
</div>

</body>
</html>

y el css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Manifestación: https://codepen.io/anthony_718/pen/ExgyKGr

¿Ha sido útil esta solución?