如何在两行中显示列表？ [英] How to display a list in two rows?
问题描述
我有一个要在垂直限制的空间中适合的项目列表：
< ul>
< li>一个< / li>
< li>两个< / li>
< li>三< / li>
< li>四< / li>
< li>五< / li>
< li>六< / li>
< / ul>
因为我不想让列表有超过一个特定的高度，我想将列表分成列，如下：
一两三
四五六
或者（在我的例子中顺序不重要）
一三五
二四六
css属性 column-count 允许将列表分成列，但它只接受固定数量的列。我不知道我将要有多少项目（它可以从1到超过40），所以如果我将列数设置为3，任何列表超过6项目将太高，如果只有4个项目，则只有第一列将有两个项目，它将看起来不均匀。
因此，理想情况下，我需要一个 row-count 属性，但它不存在。我想我可以这样做在JavaScript中，但我正在寻找一个纯CSS解决方案。
我试过的东西： float：left 每个 li 将列表放在一行。要将它分成两行，我需要将 float：left 应用到N / 2元素。我不知道该怎么做。
我也知道我可以把它分成多个 ul ，每个都有两个 li 和 float：left ，但我想避免混乱的HTML
有人有这个问题的解决方案吗？
/ strong>我想我没有清楚解释我的要求。我想要将列表排序成列而不知道我将要有多少项目，并且，以便我总是有两行。例如7个项目，我想有：
一两三
五六
并有3个项目：
一两个
三个
这里是一个简单的方法来使用jquery。我知道提到的CSS方法是需要的，但这只是为了未来的参考，如果有人想参考这个问题。
获取LI项目的数量，将它除以行数，并将该值设置为列计数属性。
Jquery
$（document）.ready（function（）{
var numitems = $（＃myList li）。length;
$ b b $（ul＃myList）。css（column-count，Math.round（numitems / 2））;
}）;
CSS
ul {
width：900px;
}
li {
width：75px;
height：75px;
margin-top：10px;
margin-right：10px;
display：inline-block;
}
HTML
< ul id =myList>
< li>一个< / li>
< li>两个< / li>
< li>三< / li>
< li>四< / li>
< li>五< / li>
< li>六< / li>
< li>七< / li>
< li>八< / li>
< li>九个< / li>
< / ul>
编辑：
使用简单的javascript执行相同的操作。 / p>
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）;
您需要设置UL的宽度，因为行数将取决于宽度，即使在设置列数。您也可以将其设置为100％，但行数将根据窗口大小更改。要将行数限制为2，可能需要UL的固定宽度。
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-count allows 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.
So, ideally I would need a row-count property, but it doesn't exist. I guess I can do that in Javascript too but I'm looking for a CSS-only solution.
I tried something: float:left on every li puts the list in one row. To break it into two rows, I would need to not apply float:left to the N/2 element. I don't know how to do that.
I know also that I can do it by breaking it into multiple ul, each one with two li, and float:left them, but I would like to avoid messing the HTML for something entirely presentational.
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:
One Two Three Four
Five Six Seven
And with 3 items:
One Two
Three
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.
Get the number of LI items and divide it by the number of rows and set that value to column-count property.
Jquery
$(document).ready(function() {
var numitems = $("#myList li").length;
$("ul#myList").css("column-count",Math.round(numitems/2));
});
CSS
ul {
width: 900px;
}
li {
width: 75px;
height: 75px;
margin-top: 10px;
margin-right: 10px;
display: inline-block;
}
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.
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.
这篇关于如何在两行中显示列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
