使用下面的HTML,将列表显示为两列的最简单方法是什么?
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
想要显示:
A B
C D
E
解决方案需要与Internet Explorer兼容。
使用下面的HTML,将列表显示为两列的最简单方法是什么?
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
想要显示:
A B
C D
E
解决方案需要与Internet Explorer兼容。
当前回答
在updateColumns()中需要if (column >= columns.length)而不是if (column > columns.length)来列出所有元素(例如跳过C),因此:
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (column >= columns.length){
column = 0;
}
console.log(column, el, idx);
$(columns.get(column)).append(el);
column += 1;
});
}
http://jsfiddle.net/e2vH9/1/
其他回答
这对我来说是一个完美的解决方案,我找了很多年:
http://css-tricks.com/forums/topic/two-column-unordered-list/
这是最简单的方法。CSS。
为ul元素添加width。 添加display:inline-block和新列的宽度(应该小于ul宽度的一半)。
ul.list {
width: 300px;
}
ul.list li{
display:inline-block;
width: 100px;
}
<ul class="list">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
与引导……这个答案(https://stackoverflow.com/a/23005046/1128742)让我想到了这个解决方案:
<ul class="list-unstyled row">
<li class="col-xs-6">Item 1</li>
<li class="col-xs-6">Item 2</li>
<li class="col-xs-6">Item 3</li>
</ul>
http://jsfiddle.net/patrickbad767/472r0ynf/
您可以使用CSS只设置两个或更多列
一个E B C D
<ul class="columns">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
ul.columns {
-webkit-columns: 60px 2;
-moz-columns: 60px 2;
columns: 60px 2;
-moz-column-fill: auto;
column-fill: auto;
}
虽然我发现加布里埃尔在一定程度上回答了工作,但我确实发现了以下问题,当我试图垂直排列列表时(第一个ul a - d和第二个ul E-G):
当ul中有偶数个li时,它并没有均匀地分布在ul中 在ul中使用数据列似乎工作得不太好,我不得不为3列放4,即使这样,它仍然只是将li扩展到由JS生成的ul的2个
我已经修改了JQuery,希望上面的情况不会发生。
(function ($) {
var initialContainer = $('.customcolumns'),
columnItems = $('.customcolumns li'),
columns = null,
column = 0;
function updateColumns() {
column = 0;
columnItems.each(function (idx, el) {
if ($(columns.get(column)).find('li').length >= (columnItems.length / initialContainer.data('columns'))) {
column += 1;
}
$(columns.get(column)).append(el);
});
}
function setupColumns() {
columnItems.detach();
while (column++ < initialContainer.data('columns')) {
initialContainer.clone().insertBefore(initialContainer);
column++;
}
columns = $('.customcolumns');
updateColumns();
}
$(setupColumns);
})(jQuery);
.customcolumns {
float: left;
position: relative;
margin-right: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="customcolumns" data-columns="3">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
</ul>
</div>