如何显示两列中的无序列表？
使用下面的HTML，将列表显示为两列最简单的方法是什么？
<ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> 期望的显示：
AB CD E
该解决scheme需要能够在Internet Explorer上工作。
现代浏览器
利用css3列模块来支持你正在寻找的东西。
http://www.w3schools.com/cssref/css3_pr_columns.asp
CSS：
ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; }
传统浏览器
不幸的是，对于IE支持，您将需要一个涉及JavaScript和dom操作的代码解决scheme。 这意味着，只要列表内容发生变化，您将需要执行操作，将列表重新sorting并重新打印。 下面的解决scheme使用jQuery简洁。
HTML：
<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>
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; }
编辑：
正如下面指出的那样，这将列出如下的列：
AE BF CG D
而OP则要求一个匹配以下内容的变体：
AB CD EF G
要完成变体，只需将代码更改为以下内容：
function updateColumns(){ column = 0; columnItems.each(function(idx, el){ if (column > columns.length){ column = 0; } $(columns.get(column)).append(el); column += 1; }); }
我在看@ @ jaider的解决scheme，但我提供了一个稍微不同的方法，我认为它更容易处理，而且我在浏览器中看到了这一点。
ul{ list-style-type: disc; -webkit-columns: 2; -moz-columns: 2; columns: 2; list-style-position: inside;//this is important addition }
默认情况下，无序列表显示外部的子弹位置，但在某些浏览器中，根据浏览器布局网站的方式会导致一些显示问题。
要使其以格式显示：
AB CD E
等等使用以下内容：
ul li{ float: left; width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns } ul{ list-style-type: disc; }
这应该解决您显示列的所有问题。 所有最好的和感谢@jaider作为你的回应帮助引导我发现这一点。
我试图张贴这个评论，但不能让列显示正确（根据您的问题）。
你要求：
AB
光盘
Ë
…但答案接受，解决scheme将返回：
广告
是
C
…所以要么答案是不正确的或问题是。
一个非常简单的解决scheme是设置你的<ul>的宽度，然后浮动并设置你的<li>项目的宽度
<ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> ul{ width:210px; } li{ background:green; float:left; height:100px; margin:0 10px 10px 0; width:100px; } li:nth-child(even){ margin-right:0; }
示例http://jsfiddle.net/Jayx/Qbz9S/1/
如果你的问题是错误的，那么以前的答案适用（与JS修复缺乏IE支持）。
我喜欢现代浏览器的解决scheme，但子弹丢失，所以我添加一个小技巧：
http://jsfiddle.net/HP85j/419/
ul { list-style-type: none; columns: 2; -webkit-columns: 2; -moz-columns: 2; } li:before { content: "• "; }
这是一个可能的解决scheme：
片段：
ul { width: 760px; margin-bottom: 20px; overflow: hidden; border-top: 1px solid #ccc; } li { line-height: 1.5em; border-bottom: 1px solid #ccc; float: left; display: inline; } #double li { width: 50%; }
<ul id="double"> <li>first</li> <li>second</li> <li>third</li> <li>fourth</li> </ul>
这是最简单的方法。 仅限CSS。
- 将宽度添加到ul元素。
- 添加显示：新列的内联块和宽度（应小于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>
这可以通过在父div上使用column-count css属性来实现，
喜欢
column-count:2;
检查了解更多细节。
如何使浮动DIV列表出现在列中，而不是行
几年后更多的答案！
在这篇文章中： http : //csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/
HTML：
<ul id="double"> <!-- Alter ID accordingly --> <li>CSS</li> <li>XHTML</li> <li>Semantics</li> <li>Accessibility</li> <li>Usability</li> <li>Web Standards</li> <li>PHP</li> <li>Typography</li> <li>Grids</li> <li>CSS3</li> <li>HTML5</li> <li>UI</li> </ul>
CSS：
ul{ width:760px; margin-bottom:20px; overflow:hidden; border-top:1px solid #ccc; } li{ line-height:1.5em; border-bottom:1px solid #ccc; float:left; display:inline; } #double li { width:50%;} #triple li { width:33.333%; } #quad li { width:25%; } #six li { width:16.666%; }
在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; }); }
你可以用jQuery-Columns插件很容易的做到这一点，例如用一个.mylist类拆分ul
$('.mylist').cols(2);
这里是一个在jsfiddle上的实例
我比CSS更喜欢这个，因为在CSS解决scheme中，并不是所有东西都垂直于顶部。
用Bootstrap …这个答案（ https://stackoverflow.com/a/23005046/1128742 ）让我指出了这个解决scheme：
<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>
顶级答案中的遗留解决scheme对我来说不起作用，因为我想要影响页面上的多个列表，答案假设一个列表，再加上它使用公平的全局状态。 在这种情况下，我想改变<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]); } });
对于我来说，这是一个完美的解决scheme，
http://css-tricks.com/forums/topic/two-column-unordered-list/
