CSS 如何在两行中显示列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20570359/
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
How to display a list in two rows?
提问by Cyrille Ka
I have a list of items that I want to fit in a space that is constrained vertically:
我有一个项目列表，我想放在垂直受限的空间中：
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
Since I don't want the list to have more than a specific height, but I'm free to expan it horizontally, I want to divide the list into columns, like this:
由于我不希望列表的高度超过特定高度，但我可以自由地水平展开它，因此我想将列表分成几列，如下所示：
One Two Three
Four Five Six
Or, alternatively (in my case order is not important)
或者，或者（在我的情况下顺序并不重要）
One Three Five
Two Four Six
The css property column-countallows to break a list into columns, but it only accepts a fixed number of columns. I don't know the number of items I am going to have (it can go from 1 to more than 40), so if I set the number of columns to 3, any list with more than 6 items will be too high, and if there is only 4 items, then only the first column will have two items and it will look uneven.
css 属性column-count允许将列表分成几列，但它只接受固定数量的列。我不知道我将要拥有的项目数（它可以从 1 到 40 多个），所以如果我将列数设置为 3，任何超过 6 个项目的列表都会太高，并且如果只有4个项目，那么只有第一列会有两个项目，看起来不均匀。
So, ideally I would need a row-countproperty, but it doesn't exist. I guess I can do that in Javascript too but I'm looking for a CSS-only solution.
所以，理想情况下我需要一个row-count属性，但它不存在。我想我也可以在 Javascript 中做到这一点，但我正在寻找一个仅使用 CSS 的解决方案。
I tried something: float:lefton every liputs the list in one row. To break it into two rows, I would need to notapply float:leftto the N/2 element. I don't know how to do that.
我尝试了一些东西：float:left在每个上将li列表放在一行中。要将其分成两行，我需要不应用于float:leftN/2 元素。我不知道该怎么做。
I know also that I can do it by breaking it into multiple ul, each one with two li, and float:leftthem, but I would like to avoid messing the HTML for something entirely presentational.
我也知道我可以通过将它分成多个来做到这一点ul，每个有两个li，还有float:left它们，但我想避免把 HTML 弄乱，因为它完全是展示性的。
Does someone has a solution for this problem?
有人有解决这个问题的方法吗？
Edit:I think I have not been clear in explaining my requirements. I want the list to be sorted into columns without knowing how many items I'm going to have, and so that I will always have two rows.
编辑：我想我在解释我的要求时还不清楚。我希望在不知道我将拥有多少项目的情况下将列表排序为列，这样我将始终有两行。
So for example with 7 items, I want to have:
因此，例如有 7 个项目，我想要：
One Two Three Four
Five Six Seven
And with 3 items:
并有 3 个项目：
One Two
Three
采纳答案by Poornima
Here is a simple way to do it using jquery. I know it is mentioned that a CSS way is needed, but this is just for future reference if anyone wants to refer to this question.
这是使用 jquery 执行此操作的简单方法。我知道有人提到需要 CSS 方式，但这仅供将来参考，如果有人想参考这个问题。
Get the number of LI items and divide it by the number of rows and set that value to column-count property.
获取 LI 项目的数量并将其除以行数并将该值设置为 column-count 属性。
Jquery
查询
$(document).ready(function() {
var numitems = $("#myList li").length;
$("ul#myList").css("column-count",Math.round(numitems/2));
});
CSS
CSS
ul {
width: 900px;
}
li {
width: 75px;
height: 75px;
margin-top: 10px;
margin-right: 10px;
display: inline-block;
}
HTML
HTML
<ul id="myList">
<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>
</ul>
EDIT:
编辑：
Same implementation using simple javascript.
使用简单的 javascript 的相同实现。
var ul = document.getElementById("myList");
var li = ul.getElementsByTagName("li");
var numItems = li.length;
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "ul { column-count: " + Math.round(numItems/2) + "; }";
document.body.appendChild(css);
You need to set the width of UL, because number of rows will depend on the width also even after setting the column-count. You can set it to 100% too, but then the number of rows will change based on the window size. To restrict the number of rows to 2, fixed width for UL may be required.
您需要设置 UL 的宽度，因为即使设置了列数，行数也将取决于宽度。您也可以将其设置为 100%，但随后行数将根据窗口大小而变化。要将行数限制为 2，可能需要 UL 的固定宽度。
回答by user1620090
You could set your li at 33% width and floating against each other, once there isn't enough room in a row they will be pushed down in rows of 3 of equal width.
您可以将 li 设置为 33% 的宽度并相互浮动，一旦一行中没有足够的空间，它们将被推下 3 行等宽。
ul li{
width: 33%;
float: left;
}
回答by Afzaal Ahmad Zeeshan
Why not give it a max-width?
为什么不给它一个max-width？
ul {
max-width: somevalue; // which would last when the third item ends
}
Or, you can add class to them as
或者，您可以将类添加到它们中
<ul>
<li class="one">One</li>
<li class="one">Two</li>
<li class="one">Three</li>
<li class="two">Four</li>
<li class="two">Five</li>
<li class="two">Six</li>
</ul>
Now CSS as:
现在 CSS 为：
.one {
display: inline;
}
.two {
display: inline;
}
The last thing of the padding is as
填充的最后一件事是
ul li {
padding: somevalue;
}
And for slicing:
切片：
ul {
max-width: 200px; // to break the list
}
The good luck for you would be that you can first check the width of the list! And then slice it into two equal parts using JS, and then applying it.
幸运的是，您可以先检查列表的宽度！然后用JS把它切成相等的两部分，然后应用它。
If you want to get the CSS calucator, then use this:
如果您想获得 CSS 计算器，请使用以下命令：
width: calc(var1 + var2); // calc will do the math..
Here is the fiddle for this situation: http://jsfiddle.net/afzaal_ahmad_zeeshan/xN87Q/
这是这种情况的小提琴：http: //jsfiddle.net/afzaal_ahmad_zeeshan/xN87Q/
回答by user3037493
you can use
您可以使用
li:nth-child(even)
li:nth-child(odd)
回答by Amarnath Balasubramanian
Source: Creating a two column Unordered List
来源：创建一个两列无序列表
Fiddle : Demo provided in the link
小提琴：链接中提供的演示
HMTL
HMTL
<ul class="two-col-special">
<li>First Category</li>
<li>Second Category</li>
<li>Third Category</li>
<li>Fourth Category</li>
<li>Fifth Category</li>
</ul>
CSS
CSS
.two-col-special {
border: 1px dotted blue;
overflow: auto;
margin: 0;
padding: 0;
}
.two-col-special li {
display: inline-block;
width: 45%;
margin: 0;
padding: 0;
vertical-align: top; /* In case multi-word categories form two lines */
}
.two-col-special li:before {
content: '+';
padding: 5px;
margin-right: 5px; /* you can tweak the gap */
color: orange;
background-color: white; /* in case you want a color... */
display: inline-block;
}
回答by Ethan Ryan
Here's an example using display: flexand flex-direction: rowto change the ordering from columns to rows:
这是一个使用display: flex和flex-direction: row将排序从列更改为行的示例：
#list-1 {
border: 3px solid red;
columns: 2;
column-gap: 5px;
width: 200px;
}
#list-2 {
border: 3px solid blue;
columns: 2;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: auto; /* can change this */
width: 200px;
}
#list-2 li {
width: 100px;
height: auto;
}<ul id="list-1">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
<ul id="list-2">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>