如何將無序列表顯示為兩列
要將無序列表顯示為兩列，根據瀏覽器的不同，有多種方法相容性要求。
現代瀏覽器：
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 程式碼最初會將欄位排序為：
按照OP的要求水平對齊它們：
將 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中文網其他相關文章！
