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

现代浏览器

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

http://www.w3schools.com/cssref/css3_pr_columns.asp

CSS：

ul {

columns: 2;

-webkit-columns: 2;

-moz-columns: 2;

}

http://jsfiddle.net/HP85j/8/

旧版浏览器

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

http://jsfiddle.net/HP85j/19/

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;

});

}