How to Create a Two-Column Unordered List Using CSS and JavaScript?

How to Display an Unordered List in Two Columns

To display an unordered list as two columns, there are multiple approaches depending on the browser compatibility requirements.

Modern Browsers:

CSS3 provides the columns module, which enables easy creation of multiple-column layouts. With the following CSS code, you can divide the list into two columns:

ul {
  columns: 2;
}

Legacy Browsers:

Internet Explorer does not support the CSS3 columns module. For IE, a JavaScript code solution is required to dynamically restructure the list into columns:

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

Note: The JavaScript code will initially order the columns as:

• A E
• B F
• C G
• D

To align them horizontally as requested by the OP:

• A B
• C D
• E F
• G

modify the updateColumns() function to:

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

The above is the detailed content of How to Create a Two-Column Unordered List Using CSS and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!