web-dev-qa-db-fra.com

Comment diviser la liste en un seul ul en 3 colonnes

J'ai une liste ul a à l'intérieur. Est-il possible de diviser la liste en 3 colonnes.

La structure de mon html est comme ceci:

 <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>

Problème: Je ne peux pas éditer directement la page et diviser la liste en 3 ul. Je dois le modifier via CSS.

Sortie: La sortie finale doit avoir 3 colonnes. Et édité via CSS

Aidez-moi, s'il vous plaît.

htmlcssfrontend
13
Redshot
ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}
48
monkeyinsight

si vous n'aimez pas la réponse du nombre de colonnes (je l'aime moi-même mais il est vrai que le support est "incertain", spécialement dans IE), vous pouvez simplement faire ceci:

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

ou même

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

Mais de cette façon vous aurez 3 colonnes bien que dans un ordre différent: au lieu de

1   4   7
2   5   8
3   6   9

tu vas avoir

1   2   3
4   5   6
7   8   9

alors considérez les avantages et les inconvénients.

Personnellement, j'utiliserais la réponse de monkeyinsight, mais si vous avez besoin d'une autre option, vous avez ici

10
Devin

CSS3 flexbox peut également faire cela:

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

Au-dessus de css créera la disposition suivante:

+--------------------+
|  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>

Dans le cas où vous souhaitez la mise en page suivante:

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

vous pouvez utiliser les css suivants:

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>
10
Mohammad Usman