如何使用 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中文網其他相關文章！