如何使用 CSS 和 JavaScript 创建两列无​​序列表？

如何将无序列表显示为两列

要将无序列表显示为两列，根据浏览器的不同，有多种方法兼容性要求。

现代浏览器：

CSS3 提供了 columns 模块，可以轻松创建多列布局。使用以下 CSS 代码，您可以将列表分为两列：

ul {
  columns: 2;
}

旧版浏览器：

Internet Explorer 不支持 CSS3 列模块。对于 IE，需要 JavaScript 代码解决方案将列表动态重组为列：

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

注意： JavaScript 代码最初会将列排序为：

• A E
• B F
• C G
• D

按照OP的要求水平对齐它们：

• A B
• C D
• 乙F
• G

将 updateColumns() 函数修改为：

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

以上是如何使用 CSS 和 JavaScript 创建两列无​​序列表？的详细内容。更多信息请关注PHP中文网其他相关文章！