Si j'ai une liste comme

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Comment pourrais-je le faire afficher horizontalement pour, disons, les deux premiers éléments et les trois suivants, mais se diviser en une deuxième ligne entre eux?

Edit: recherche d'une solution CSS, afin que je puisse choisir de le faire en fonction de la taille de la fenêtre.

0
Arepo 19 avril 2017 à 22:24

3 réponses

Meilleure réponse

En utilisant Flexbox (css), vous pouvez y parvenir. Avec cette solution, cela dépend du nombre d'éléments à afficher sur la première ligne. Par exemple, si vous voulez que les éléments apparaissent sur la première ligne, vous divisez 100 par 4, ce qui donne 25 et donne la largeur 25%; Voici trois exemples. J'espère que ça aide

ul {
  display: flex;
  flex-wrap: wrap;
  border: 1px red solid;
}
li {
  width: 33.33%;
}

ul+ul{
  width: 100px;
}
ul+ul li {
  width: 50%;

}
ul+ul li:nth-last-of-type(-n+3) {
  width: 33.33%;
}

ul + ul + ul {
  display: flex;
  flex-wrap: wrap;
  border: 1px red solid;
  width: 150px;
}
ul + ul + ul li:nth-of-type(2) {
  width: 50%
}
ul + ul + ul li {
  width: 33.33%;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
1
blecaf 19 avril 2017 à 21:16

Vous pouvez utiliser column-count: 2; sur le ul pour créer deux colonnes dans lesquelles la liste sera uniformément répartie:

ul {
column-count: 2;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
1
Johannes 19 avril 2017 à 21:18

Je suppose que vous pouvez utiliser une table. Utilisez l'étendue de ligne et l'étendue de col pour vous aider à aligner

0
CuriousRK 19 avril 2017 à 19:27