使用下面的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兼容。
当前回答
虽然我发现加布里埃尔在一定程度上回答了工作，但我确实发现了以下问题，当我试图垂直排列列表时(第一个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>
其他回答
您可以使用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;
}
我喜欢现代浏览器的解决方案，但缺少子弹，所以我添加了一个小技巧:
http://jsfiddle.net/HP85j/419/
ul {
list-style-type: none;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
li:before {
content: "• ";
}
虽然我发现加布里埃尔在一定程度上回答了工作，但我确实发现了以下问题，当我试图垂直排列列表时(第一个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>
这是最简单的方法。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>上面答案中的遗留解决方案不适合我，因为我想影响页面上的多个列表，而答案假设一个列表加上它使用了相当多的全局状态。在这种情况下，我想改变<section class="list-content">中的每个列表:
const columns = 2;
$("section.list-content").each(function (index, element) {
let section = $(element);
let items = section.find("ul li").detach();
section.find("ul").detach();
for (let i = 0; i < columns; i++) {
section.append("<ul></ul>");
}
let lists = section.find("ul");
for (let i = 0; i < items.length; i++) {
lists.get(i % columns).append(items[i]);
}
});
