<li> sur 2 colonnes

Salut.

J'ai un problème qui me semble simple, mais j'ai beau tourner tout ça dans ma tête, je ne trouve pas ! J'ai un <ul> avec une 20aine de <li> qui doit s'afficher comme ça :
- li 01 - li 11
- li 02 - li 12
- li 03 - li 13
- li 04 - li 14
- … - …

Quelqu'un a une solution sans que je doive couper mon <ul> en 2 ?

Bonsoir,

Les multicolonnes en CSS3 ?

Oui… J'y ai pensé, mais le site est compatible IE8+…]

A priori donc, pas de solution…

Bonjour Derwoed,

Un soutient JavaScript serait possible dans votre cas.
Est-ce une solution techniquement envisageable pour vous ?
Modifié par Guiwint (26 Jun 2014 - 11:39)

Merci pour votre réponse, mais non, le JS n’est pas vraiment envisageable pour ça. Ce serait un peu prendre une masse pour enfoncer une punaise… puisque je peux très bien arriver au résultat attendu en faisant 2 listes.

En fait mon problème est que j’ai sémantiquement une liste ordonnée (en alpha, de A à V) et que la maquette graphique présente cette liste sur 2 colonnes (ce que je ne remet pas en cause, c’est visuellement beaucoup mieux ainsi). Seulement, si je fais 2 <ol> je trouve ça moyen comme code. J’espérais qu’une solution CSS2 m’échappe, mais apparemment ce n’est pas le cas… Heureusement l’attribut start me permettra de préserver l’ordre…

Encore merci pour vos réponses, en ce qui me concerne, je vais de l’avant avec mes 2 liste

Bonsoir,

Un article (en EN) très intéressant de A List Apart, il ne date pas d'hier, mais tu y trouveras peut-être des choses qui pourront te mettre sur la voie, je l'espère (les commentaires ne sont pas moins intéressants ):
CSS Swag: Multi-Column Lists

Bon courage.

Merci. Je lis ça et vous tiens au courant…

L’article date un peu (2007) et est donc un peu dépassé dans son analyse vu que certaines choses ont changé. Toutefois, il reste très intéressant.

Avant de lire cet article, j’avais choisi la solution 2 (ou la 3, je n’avais pas encore décidé). Il faut noter que contrairement à ce qui est dit, les attribut "start" et "value" ne sont pas dépréciés. Ou plutôt ne le sont plus en HTML5.

Maintenant, la solution 6 full CSS est attirante, mais aussi à mon avis plus contraignante. Je vais faire des tests en commençant par la 6 et ferai mon choix en conséquence…

Encore merci.
Modifié par Derwoed (27 Jun 2014 - 10:22)