Comment créer une liste non ordonnée à deux colonnes à l'aide de CSS et JavaScript ?

Comment afficher une liste non ordonnée sur deux colonnes

Pour afficher une liste non ordonnée sur deux colonnes, il existe plusieurs approches selon le navigateur exigences de compatibilité.

Navigateurs modernes :

CSS3 fournit le module de colonnes, qui permet de créer facilement des mises en page à plusieurs colonnes. Avec le code CSS suivant, vous pouvez diviser la liste en deux colonnes :

ul {
  columns: 2;
}

Navigateurs hérités :

Internet Explorer ne prend pas en charge le module de colonnes CSS3. Pour IE, une solution de code JavaScript est nécessaire pour restructurer dynamiquement la liste en colonnes :

<div>
  <ul class="columns" data-columns="2">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
  </ul>
</div>

<script>
  (function($) {
    // JavaScript code to create the two-column layout
  })(jQuery);
</script>

Remarque : Le code JavaScript ordonnera initialement les colonnes comme :

• A E
• B F
• C G
• D

Pour les aligner horizontalement comme demandé par l'OP :

• A B
• C D
• E F
• G

modifier le Fonction updateColumns() vers :

function updateColumns() {
  column = 0;
  columnItems.each(function(idx, el) {
    if (column > columns.length) {
      column = 0;
    }
    $(columns.get(column)).append(el);
    column += 1;
  });
}

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!