Question

只是想知道html列表是否可以基于其位置（使用css和/或jquery）进入列中

假设我想创建与（TOTAL-ITEMS / 3）一样多的列。

然后在此列表中我将获得2列。

<ul id="list-1" >
  <li>item in first column</li>
  <li>item in first column</li>
  <li>item in first column</li>

  <li>item in second column</li>
  <li>item in second column</li>
  <li>item in second column</li>
</ul>

在这篇文章中，我将获得3列。

<ul id="list-1">
  <li>item in first column</li>
  <li>item in first column</li>
  <li>item in first column</li>

  <li>item in second column</li>
  <li>item in second column</li>
  <li>item in second column</li>

  <li>item in third column</li>
  <li>item in third column</li>
  <li>item in third column</li>
</ul>

由于列表是由CSM生成的，我无法添加自定义类或id。

Answer 1

绝对可以像这样添加列：

ul {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

Jsfiddle Demo

Column-count @ MDN

但是，CSS无法检测应用特定列数的li的数量。你必须以其他方式确定。

有一种JQuery技术如下：

归功于此SO Question

$(document).ready(function() {
    var numitems =  $("#myList li").length;    
    $("ul#myList").css("column-count",numitems/3);
    $("ul#myList").css("-webkit-column-count",numitems/3);
    $("ul#myList").css("-moz-column-count",numitems/3);

});

<强> JSfiddle Demo 2

Answer 2

只需将column-count: 3;添加到无序列表

即可

Answer 3

我可以帮你。

$(function() {
  var count = $("#list-1 li").length;
  var x = Math.ceil($(count)[0]/3);
  $("#list-1").css({"-webkit-column-count": ''+x, 
                    "-moz-column-count": ''+x,
                    "column-count": ''+x});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list-1">
  <li>item in first column</li>
  <li>item in first column</li>
  <li>item in first column</li>

  <li>item in second column</li>
  <li>item in second column</li>
  <li>item in second column</li>

  <li>item in third column</li>
  <li>item in third column</li>
  <li>item in third column</li>
  
  <li>item in fourth column</li>
</ul>

如何将html列表分成列

3 个答案: