如何在两列中显示无序列表？

215

使用以下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  css  html-lists  css-multicolumn-layout 
— atp03
source
1
这是一个如何在jquery中轻松实现的实时示例：jsfiddle.net/EebVF/5使用此jquery插件：github.com/fzondlo/jquery-columns-我比使用CSS更好，因为使用CSS解决方案并不能使所有内容对齐垂直于顶部。
— newUserNameHere 2014年

Answers:

371

现代浏览器

利用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：

<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;
}

编辑：

如下所述，这将按以下顺序对列进行排序：

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;
    });
}
— 加布里埃尔
source
2
您没有以正确的顺序显示项目：jsfiddle.net/HP85j/258例如，第一行中的期望显示为A B（第二个元素应附加在右侧），但在示例中为A E。
— Paolo Moretti 2014年
1
很棒的工作，尽管如果有两列以上，逻辑上也会有缺陷，但我在这里创建了修复程序：jsfiddle.net/HP85j/393
— Tr1stan 2014年
2
子弹不见了
— Jaider 2014年
1
可能更希望列表在第1列之前先填满第1列。简单地对列表中的项目进行重新排序可能会更容易，以便看起来它们在向下填满之前就已经填满了。当然，如果列表更改，可能需要重做。无论如何，Gabriel的CSS答案正是我所需要的，谢谢！
— punstress
3
只是更新较晚，我相信第一个选项现在可以在现代IE浏览器中使用。
— 嘶嘶声
82

我一直在查看@jaider的解决方案，但是我提供的方法略有不同，我认为它更易于使用，并且在所有浏览器中都很好。

ul{
    list-style-type: disc;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    list-style-position: inside;//this is important addition
}

默认情况下，无序列表在外部显示项目符号的位置，但是在某些浏览器中，这将基于浏览器布局网站的方式而导致某些显示问题。

要使其以以下格式显示：

A B
C D
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，您的回复帮助引导我发现了这一点。

— 温尼弗雷德
source
3
此方法存在问题。它非常适合显示非常短的列表项（在此示例中为1个字符）。创建一个具有较长描述的列表，第二列与第一列重叠，并且用完ul容器。
— 毛茸茸的2015年
1
我通过更改float：left来略微调整了这一点，以显示它：li元素的内联块，除了这对我有用。
— ZeRemz
40

我尝试将其发布为评论，但无法使列正确显示（根据您的问题）。

您要求：

AB

光盘

Ë

...但是作为解决方案接受的答案将返回：

广告

是

C

...所以答案是错误的或问题是。

一个非常简单的解决方案是设置您的宽度，<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/

如果您的问题是错误的，则可以使用前面的答案（带有针对IE的JS修复）。

— 杰克斯
source
@Gabriel您的解决方案和行为都很好，符合预期，因此我没有试图打扰您的答案，嘿……我只是认为问题可能会被曲解……无论哪种方式，无论如何都可以解决问题这是正确的问题：D
— Jayx
16

我喜欢现代浏览器的解决方案，但是缺少项目符号，因此我添加了一些技巧：

http://jsfiddle.net/HP85j/419/

ul {
    list-style-type: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}


li:before {
  content: "• ";
}

在此处输入图片说明

— 杰德
source
在这里，我们可以更改项目的颜色，而无需更改项目符号的颜色jsfiddle.net/HP85j/444
— Jaider 2014年
3
我认为这list-style-position: inside;是使子弹正确显示的更好解决方案。
— Alexis Wilke
11

这是一个可能的解决方案：

片段：

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>
展开摘要

做到了。
对于3列，使用li宽度为33％，对于4列，使用宽度为25％，依此类推。

— 阿卜杜勒
source
5

这是最简单的方法。仅CSS。

  1. 向ul元素添加宽度。
  2. 添加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>
展开摘要
— 阿维夫·沙尔（Aviv Shaal）
source
2
与答案添加一些解释如何回答帮助OP在固定电流问题
— ρяσѕρєяķ
4

您只能使用CSS设置两列或更多列

自动曝光

乙

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;
 }
— 布赫巴
source
2

您可以使用jQuery-Columns插件非常轻松地执行此操作，例如使用您要执行的.mylist类拆分ul

$('.mylist').cols(2);

这是jsfiddle上的一个实时示例

我比使用CSS更好，因为使用CSS解决方案时，并非所有内容都垂直对齐顶部。

— newUserNameHere
source
有趣，但是它实际上将<ul>列表分解为多个列表...这会使其他事情变得复杂。
— Alexis Wilke
这实际上是我所追求的解决方案，对于下降的投票者，如果您阅读了OP的问题并且不需要DV，那么这个答案是有效的。
— Tricky
2

几年后又有一个答案！

本文中的文章： 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%; }
— 用户名
source
1

在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/

— 达弗
source
1

最佳答案中的旧式解决方案对我而言不起作用，因为我想影响页面上的多个列表，并且答案假定一个列表，并且使用了相当多的全局状态。在这种情况下，我想更改内的每个列表<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]);
    }
});
— 汤姆
source
例如，如何生成两列，一列仅包含磁贴，另一列是无序列表？
— Dalek
不太清楚你的意思。如果您有一系列带有标题的项目，则可以将它们放在包含标题，项目，标题，项目的单个列表中，然后这应该对您有用。
— 汤姆（Tom）
1

尽管我发现加百列的答案在一定程度上起作用了，但在尝试垂直排序列表时（第一个ul AD和第二个ul EG）确实找到了以下内容：

  • 当ul中有偶数个li时，它并没有均匀地分布在ul中
  • 在ul中使用数据列似乎不能很好地工作，我不得不在4列中放入3列，即使那样，它仍然只能将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>
— 安东尼·梅德赫斯特
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.