Comment puis-je utiliser CSS pour diviser une longue liste de pages Web en plusieurs colonnes ?

Dissocier les listes de pages Web en colonnes avec CSS

Problème :

Améliorer la lisibilité de une liste verticale sur une page Web en la divisant en plusieurs columns.

Solution :

La solution CSS recommandée utilise la propriété column-count. Cette propriété permet de diviser une liste en colonnes spécifiées avec un espacement réglable.

ul {
  column-count: 4;
  column-gap: 20px;
}

Ce code créera quatre colonnes dans la liste, avec un espace de 20 pixels entre elles.

Compatibilité :

La prise en charge du nombre de colonnes par les navigateurs est répandue, à l'exclusion des versions 9 et d'Internet Explorer ci-dessous.

Alternatives :

Pour la prise en charge d'Internet Explorer, des solutions basées sur JavaScript telles que Columnizer pour jQuery peuvent être utilisées.

Remplacer pour Internet Explorer :

Utilisez les solutions de secours CSS, telles que float: left, pour afficher les éléments de la liste horizontalement dans colonnes pour Internet Explorer.

<!--[if lt IE 10]>
<style>
li {
  width: 25%;
  float: left
}
</style>
<![endif]-->

Remarque :

La solution de secours CSS conservera une présentation visuelle similaire mais peut perturber l'ordre des éléments de la liste.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!