html css - 如何创建多列列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2347060/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html css - how to create multiple column list?
提问by anonymous
I have an "Ordered List" which contains about 100 "List Items". This ol makes my page very long and users have to scroll too much.
我有一个“有序列表”，其中包含大约 100 个“列表项”。这个 ol 使我的页面很长，用户不得不滚动太多。
How can I get the UL to show like this:
我怎样才能让 UL 显示如下：
1. 6. 11.
2. 7. 12.
3. 8. 13.
4. 9. 14.
5. 10. 15.
采纳答案by Knu
In a perfect world you could use css3 column modulebut sadly it's currently only partially supported by webkit and gecko browsers (using -webkit and -moz).
在一个完美的世界中，您可以使用css3 列模块，但遗憾的是，它目前仅被 webkit 和 Gecko 浏览器部分支持（使用 -webkit 和 -moz）。
回答by Enrico Carlesso
If for you don't care about the vertical order, but only the layout:
如果您不关心垂直顺序，而只关心布局：
1. 2. 3. 4.
5. 6. 7. 8.
9. 10. 11. 12.
You can simply set the li elements this way:
您可以通过这种方式简单地设置 li 元素：
li {
display: block;
width: 25%;
float: left;
}
It should work. If you need to have them in vertical order you need to act in the php script dividing them into separate divs and then float them.
它应该工作。如果您需要按垂直顺序排列它们，您需要在 php 脚本中将它们分成单独的 div，然后浮动它们。
回答by Michiel
There was an article on A List Aparta while back which covered exactly this question. I guess if what is mentioned there doesn't suffice you could of course always revert to server-sided coding or client-side coding to divide the list automatically in three portions.
不久前有一篇关于 A List Apart 的文章正好涵盖了这个问题。我想如果那里提到的内容还不够，您当然可以始终恢复到服务器端编码或客户端编码，以将列表自动分为三部分。
回答by blocks
I was able to get the proper ordering with a little jQuery:
我能够用一点 jQuery 获得正确的排序：
function splitList($list, n) {
var i, k;
var colHeight = Math.ceil($list.children().length / n)
var colWidth = Math.floor(100 / n) + "%"
for (i = 0; i < n; i++) {
$list.append("<ul class='liCol'></ul>")
for (k = 0; k < colHeight; k++) {
$list.children("li").eq(0).appendTo(".liCol:last")
}
}
$(".liCol").css("width", colWidth)
$list.show() // list originally hidden to avoid displaying before ready
}
basic styles for .liCol:
.liCol 的基本样式：
.liCol {
padding: 0px;
margin: 0px;
float: left;
}
回答by Herman
I created a solution that also works for ordered (numbered) lists. These lists have to continue numbering through the columns.
我创建了一个也适用于有序（编号）列表的解决方案。这些列表必须通过列继续编号。
Add the following script to your page (doesn't matter where, nicest is in a seperate js-file):
将以下脚本添加到您的页面（无论在哪里，最好的是在单独的 js 文件中）：
<script type="text/javascript">
// As soon as the document's structure has been loaded:
document.addEventListener( "DOMContentLoaded", function() {
// For each html elem:
elems = document.getElementsByTagName("*"); // OL and UL wanted: chose all (*) here and select later.
for ( var e = 0; e < elems.length; e++ ) {
// Check if elem is a list (ordered/unordered) and has class name "cols":
if ( ( elems[e].tagName == "OL" || elems[e].tagName == "UL" ) && elems[e].className.search("cols") > -1 ) {
// Collect list items and number of columns (from the rel attribute):
var list = elems[e];
var listItems = list.getElementsByTagName("LI");
var Ncols = list.getAttribute("rel")*1; // *1 converts rel from string to int.
// Determine total number of items, items per column and column width:
var Ntotal = listItems.length;
var Npercol = Math.ceil( Ntotal/Ncols );
var colWidth = Math.floor( 100/Ncols )+"%";
// For each column:
for ( var c = 0; c < Ncols; c++ ) {
// Create column div:
var colDiv = document.createElement("DIV");
colDiv.style.cssFloat = "left";
colDiv.style.width = colWidth;
// Add list items to column div:
var i_start = c*Npercol;
var i_end = Math.min( (c+1)*Npercol, Ntotal );
for ( var i = i_start; i < i_end; i++ )
colDiv.appendChild( listItems[0] ); // Using listItems[0] instead of listItems[i], because items are moved to colDiv!
// Add column div to list:
list.appendChild( colDiv );
}
}
}
} );
</script>
Then you can simply create multiple columns lists like this:
然后您可以简单地创建多列列表，如下所示：
<ol class="cols" rel="3">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ol>
So, setting class="cols" and rel="[number_of_columns]" and the script will do the rest!
因此，设置 class="cols" 和 rel="[number_of_columns]" 脚本将完成剩下的工作！
回答by VoVaVc
I had a similar problem this morning, if you need only modern browsers you could do it this way:
今天早上我遇到了类似的问题，如果你只需要现代浏览器，你可以这样做：
ul
{
list-style-type: none;
counter-reset: section;
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
ul li
{
padding-left: 30px;
position: relative;
}
ul li:before
{
counter-increment: section;
content: counter(section) ".";
margin: 0 0 0 -34px;
text-align: right;
width: 2em;
display: inline-block;
position: absolute;
height: 100%;
}
回答by Fabrizio Calderan
You can use 2D transforms: they have a wider support by modern browser than CSS3 columns. See my answer here
您可以使用 2D 转换：现代浏览器对它们的支持比 CSS3 列更广泛。在这里看到我的答案
回答by Tim Vermaelen
Since I had the same problem and couldn't find anything "clean" I thought I'd posted my solution. In this example I use a reversed whileloop so I can use spliceinstead of slice. The advantage now is splice() only needs an index and a range where slice() needs an index and the total. The latter tends to become difficult while looping.
由于我遇到了同样的问题并且找不到任何“干净”的东西，我以为我已经发布了我的解决方案。在这个例子中，我使用了一个反向while循环，所以我可以使用splice而不是slice. 现在的优势是 splice() 只需要一个索引和一个范围，其中 slice() 需要一个索引和总数。后者在循环时往往变得困难。
Disadvantage is I need to reverse the stack while appending.
缺点是我需要在追加时反转堆栈。
Example:
例子：
cols = 4; liCount = 35
列 = 4; liCount = 35
for loop with slice = [0, 9]; [9, 18]; [18, 27]; [27, 35]
for 循环切片 = [0, 9]; [9, 18]; [18, 27]; [27, 35]
reversed while with splice = [27, 8]; [18, 9]; [9, 9]; [0, 9]
反转而 splice = [27, 8]; [18, 9]; [9, 9]; [0, 9]
Code:
代码：
// @param (list): a jquery ul object
// @param (cols): amount of requested columns
function multiColumn (list, cols) {
var children = list.children(),
target = list.parent(),
liCount = children.length,
newUl = $("<ul />").addClass(list.prop("class")),
newItems,
avg = Math.floor(liCount / cols),
rest = liCount % cols,
take,
stack = [];
while (cols--) {
take = rest > cols ? (avg + 1) : avg;
liCount -= take;
newItems = children.splice(liCount, take);
stack.push(newUl.clone().append(newItems));
}
target.append(stack.reverse());
list.remove();
}
回答by Joshua Clinton
So I've looked into this and found a solution that will work for all browsers.
所以我研究了这个并找到了一个适用于所有浏览器的解决方案。
My HTML list:
我的 HTML 列表：
<ol class="list-items">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li class="second-list">Item5</li>
<li class="second-list">Item6</li>
<li class="second-list">Item7</li>
<li class="second-list">Item8</li>
</ol>
Notice I gave the last 4 list items a class of second-list, this is important for our jQuery.
请注意，我将最后 4 个列表项设为第二列表，这对我们的 jQuery 很重要。
Next, on my webpage, I made a div with class second-list-appender in the second column, the column I want my second list to be in.
接下来，在我的网页上，我在第二列中创建了一个带有 class second-list-appender 的 div，我希望我的第二个列表在该列中。
var secondListStart = $(".list-items").children().length - 3;
$(".second-list-appender").append($("<ol start=" + secondListStart + ">"));
$(".second-list-appender ol").append($(".second-list"));
$(".second-list-appender").append($("</ol>"));
See, I actually make 2 lists out of 1, but make it look like one list in 2 columns, by giving start of the second list the next number of the previous list.
看，我实际上从 1 个列表中创建了 2 个列表，但通过将前一个列表的下一个数字作为第二个列表的开头，使其看起来像一个 2 列中的列表。
I did it with 2 columns, but you can just repeat this process, or create a function and call that within a loop for how many times you want to repeat it.
我用 2 列做了它，但你可以重复这个过程，或者创建一个函数并在循环中调用它你想要重复多少次。
Hope this can still help some peeps out.
希望这仍然可以帮助一些窥视。
