为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

慕容708150 2019-10-06 14:32:27

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


查看完整描述

3 回答

?
料青山看我应如是

现代浏览器

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

    });

}


查看完整回答
反对 回复 2019-10-06
?
芜湖不芜

我一直在查看@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,您的回复帮助引导我发现了这一点。


查看完整回答
反对 回复 2019-10-06
?
慕莱坞森

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


您要求:


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修复程序)。


查看完整回答
反对 回复 2019-10-06

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信