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

Question

使用以下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上运行.

Answer 1

现代浏览器

利用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;
    });
}

Answer 2

我正在研究@ 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作为您的回复,有助于指导我发现这一点.

Answer 3

我尝试将此作为评论发布,但无法使列显示正确(根据您的问题).

你要求:

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修复).

Answer 4

我喜欢现代浏览器的解决方案,但子弹丢失了,所以我添加了一个小技巧:

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

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


li:before {
  content: "• ";
}

Answer 5

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

片段:

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%,依此类推.

Answer 6

现在，对于预期的结果，display:grid;会做（最简单的？）：

ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>

您还可以使左侧的列缩小并能够具有不同的宽度：

ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
}

li {
  margin-left: 1em;
  border: solid 1px;/*see me */
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C 123456</li>
  <li>D</li>
  <li>E</li>
</ul>

Answer 7

这可以通过使用父div上的column-count css属性来实现，

喜欢

 column-count:2;

查看此内容以了解更多详细信息。

如何使浮动DIV列表出现在列中，而不是行中

Answer 8

这是最简单的方法。仅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>

Answer 9

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

AE

乙

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