html无序列表怎么做成两列,如何在两列中显示无序列表？

小编典典

现代浏览器

利用css3列模块来支持您要寻找的内容。

CSS：

ul {

columns: 2;

-webkit-columns: 2;

-moz-columns: 2;

}

旧版浏览器

不幸的是，要获得IE支持，您将需要一个涉及JavaScript和dom操作的代码解决方案。这意味着，只要列表内容发生更改，您就需要执行将列表重新排序为列并重新打印的操作。为了简洁起见，下面的解决方案使用jQuery。

HTML：

• A
• B
• C
• D
• E
• F
• G

JavaScript：

(function($){

var initialContainer = $('.columns'),

columnItems = $('.columns li'),

columns = null,

column = 1; // account for initial column

function updateColumns(){

column = 0;

columnItems.each(function(idx, el){

if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){

column += 1;

}

$(columns.get(column)).append(el);

});

}

function setupColumns(){

columnItems.detach();

while (column++ < initialContainer.data('columns')){

initialContainer.clone().insertBefore(initialContainer);

column++;

}

columns = $('.columns');

}

$(function(){

setupColumns();

updateColumns();

});

})(jQuery);

CSS：

.columns{

float: left;

position: relative;

margin-right: 20px;

}

编辑：

如下所述，这将对列进行如下排序：

A E

B F

C G

D

而OP要求匹配以下内容的变体：

A B

C D

E F

G

要完成变体，只需将代码更改为以下内容：

function updateColumns(){

column = 0;

columnItems.each(function(idx, el){

if (column > columns.length){

column = 0;

}

$(columns.get(column)).append(el);

column += 1;

});

}

2020-05-10