如何显示两列中的无序列表?

使用下面的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; } 

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

传统浏览器

不幸的是,对于IE支持,您将需要一个涉及JavaScript和dom操作的代码解决scheme。 这意味着,只要列表内容发生变化,您将需要执行操作,将列表重新sorting并重新打印。 下面的解决scheme使用jQuery简洁。

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

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。

  1. 将宽度添加到ul元素。
  2. 添加显示:新列的内联块和宽度(应小于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; }); } 

http://jsfiddle.net/e2vH9/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> 

http://jsfiddle.net/patrickbad767/472r0ynf/

顶级答案中的遗留解决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/