logo标签列表

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

htmlcsshtml-listscss-multicolumn-layout
308

使用以下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浏览器中运行。

1
这是一个使用jQuery轻松完成的实时示例：jsfiddle.net/EebVF/5。使用此jQuery插件：github.com/fzondlo/jquery-columns - 我喜欢这个比CSS更好，因为使用CSS解决方案时，并非所有内容都垂直对齐到顶部。 - newUserNameHere
19个回答
535

现代浏览器

利用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;
    });
}
4
您没有按照正确的顺序显示项目： http://jsfiddle.net/HP85j/258/ 例如，第一行中期望的显示为A B（第二个元素应附加在右侧），但在您的示例中是A E。 - Paolo Moretti
2
the bullets are missing - Jaider
1
在填充第二列之前，可能更希望列表填充第一列。将列表项重新排序，使其看起来是横向填充而不是纵向填充可能更容易。当然，如果列表发生更改，则可能需要重新进行排序。无论如何，Gabriel的CSS答案正是我所需要的，谢谢！ - punstress
3
晚了一点更新，我相信第一个选项现在可以在现代IE浏览器中使用。 - Fizz
1
没事了，我找到了：https://dev59.com/bHA75IYBdhLWcg3wYYBQ - RocketGuy3
显示剩余7条评论
101

我看了@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，因为他的回复帮助我发现了这个。

5
这种方法存在问题。对于显示非常短的列表项（例如，只有1个字符），它的效果很好。但如果创建具有较长描述的列表，则第二列会与第一列重叠，并且超出 ul 容器范围。 - Shaggy
2
我稍微调整了一下，将li元素的float:left改为display:inline-block，除此之外这对我非常有效。 - ZeRemz
47

我试图将此内容作为评论发布，但无法正确显示列（根据您的问题）。

您要求:

A B

C D

E

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

A D

B E

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/

如果你的问题有误，那么之前的答案适用（包括一个JS修复缺乏IE支持的解决方案）。

@Gabriel，你的解决方案和行为都很好，符合预期，所以我并不是想贬低你的回答...我只是认为问题可能被误解了...无论如何-无论哪个是正确的问题，问题都已经得到了回答:D - Jayx
26
现在，对于预期的结果来说，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>

编辑 要绘制一列又一列的列，有两个选项（与列CSS不同，每个列可以有自己的宽度）。
- 在`grid-template-rows`规则和`grid-auto-flow`中设置行数。 

ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0em, max-content));
  grid-template-rows: repeat(5, 1fr);/* 5 rows */
  grid-auto-flow: column;
  list-style: none;
  padding: 0;
  margin: 1em;
  gap: 5px
}

li {
  background: silver;
  padding: 0.15em;
  margin: 0;
}

li::first-letter {
  color: blue;
}
<ul>
  <li>A</li>
  <li>B</li>
  <li>Column</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>Hello</li>
  <li>I</li>
  <li>J</li>
  <li>K</li>
  <li>L</li>
  <li>M</li>
  <li>N</li>
  <li>On</li>
  <li>P</li>
  <li>Q</li>
  <li>R</li>
  <li>S</li>
  <li>Testing</li>
  <li>U</li>
  <li>V</li>
  <li>World</li>
  <li>X</li>
  <li>Y</li>
  <li>Zend</li>
</ul>

使用伪跨越来占据多行。将其与网格偏移。 

ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0em, max-content));
  grid-auto-flow: column;
  list-style: none;
  padding: 0;
  margin: 1em;
  gap: 5px
}

ol:before {
  content: '';
  grid-column: -1;
  width: 0;
  grid-row: 1 /7;  /*6 rows */
}

li {
  background: silver;
  padding: 0.15em;
  margin: 0;
}

li:first-letter {
  color:tomato; /*ketchup*/
}
<ol>
  <li>A</li>
  <li>B</li>
  <li>Column</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>Hello</li>
  <li>I</li>
  <li>J</li>
  <li>K</li>
  <li>L</li>
  <li>M</li>
  <li>N</li>
  <li>On</li>
  <li>P</li>
  <li>Q</li>
  <li>R</li>
  <li>S</li>
  <li>Testing</li>
  <li>U</li>
  <li>V</li>
  <li>World</li>
  <li>X</li>
  <li>Y</li>
  <li>Zend</li>
</ol>

1
谢谢！这比被接受的答案更好，因为它使列中的元素高度匹配。 - tbotalla
有没有办法让它按字母顺序从上到下显示，而不是从左到右？ - Dex
@Dex 使用网格布局？是的，但你需要定义高度或行数，这里3行就可以了：https://codepen.io/gc-nomade/pen/gOKgONa - G-Cyrillus
20

我喜欢这个现代浏览器的解决方案，但是它缺少了项目符号，所以我加了一个小技巧：

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

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


li:before {
  content: "• ";
}

这里输入图像描述

在这里，我们可以更改项目的颜色，而不更改标记符的颜色 http://jsfiddle.net/HP85j/444/ - Jaider
3
我认为 list-style-position: inside; 是让项目符号正确显示的更好解决方案。 - Alexis Wilke
15

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

代码片段：

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％，以此类推。

7

这是最简单的方法，只需使用CSS。

  1. 给ul元素添加width属性。
  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>
3
在回答中加入一些解释，说明这个答案如何帮助OP解决当前的问题。 - ρяσѕρєя K
6
1
column-count 不会按照正确的顺序显示项目。例如，第一行中期望的显示为 A B（第二个元素应该附加在右侧），但是如果使用 column-count，它将显示为 A E。 - Paolo Moretti
6
您可以使用CSS来设置两列或多列

A 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;
 }
4
假设多列布局与居中布局结合使用，可以通过在水平间距上进行gap调整来justifygrid布局。 

p {
  text-align: justify;
}

ul {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-around;
  gap: 0 3em;
  text-transform: capitalize;
}
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p>
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
</ul>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接