Css 如何将列表显示为两行？

我有一个项目列表，我想在垂直约束的空间中放置这些项目：

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

或者，或者（在我的情况下，顺序并不重要）

css属性

column count

允许将列表拆分为列，但它只接受固定数量的列。我不知道我将拥有的项目数量（可以从1到40多个），因此如果我将列数设置为3，则任何包含6个以上项目的列表都会太高，如果只有4个项目，则只有第一列包含两个项目，并且看起来不均匀

因此，理想情况下，我需要一个

行计数

属性，但它不存在。我想我也可以在Javascript中实现这一点，但我正在寻找一个只使用CSS的解决方案

我尝试了一些方法：

float:left

在每个

li

上将列表放在一行中。要将它分成两行，我需要不对N/2元素应用

float:left

。我不知道怎么做

我还知道，我可以通过将它分成多个

ul

，每个都有两个

li

，和

float:left

来实现，但我希望避免将HTML完全弄乱

有人能解决这个问题吗

编辑：我想我没有清楚地解释我的要求。我希望在不知道将有多少项的情况下将列表排序为列，这样我将始终有两行

例如，对于7个项目，我想要：

One    Two     Three   Four
Five   Six     Seven

和3个项目：

One    Two
Three  

---

为什么不给它一个

最大宽度

ul {
  max-width: somevalue; // which would last when the third item ends
}

或者，您可以将类作为

<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>

填充的最后一件事是

ul li {
  padding: somevalue;
} 

对于切片：

ul {
  max-width: 200px; // to break the list
}

幸运的是，你可以先检查列表的宽度！然后使用JS将其分成两个相等的部分，然后应用它

如果要获取CSS calucator，请使用以下命令：

width: calc(var1 + var2); // calc will do the math..

---

这里是解决这种情况的方法：

你可以将你的li设置为33%的宽度，并互相浮动，一旦一排中没有足够的空间，它们将被按成3排，宽度相等

ul li{
  width: 33%;
  float: left;
}

你可以用

li:nth-child(even) 

li:nth-child(odd)

来源：

小提琴：

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>

<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>

---

下面是一个使用jquery实现的简单方法。我知道有人提到CSS的方式是必要的，但如果有人想提到这个问题，这只是为了将来的参考

获取LI项的数量并将其除以行数，然后将该值设置为column count属性

Jquery

$(document).ready(function() {
var numitems =  $("#myList li").length;

$("ul#myList").css("column-count",Math.round(numitems/2));
});

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;
}

ul {
  width: 900px;
}
li {
width: 75px;
height: 75px;
margin-top: 10px;
margin-right: 10px;
display: inline-block;
}

HTML

<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>

<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>

---

您需要设置UL的宽度，因为即使在设置列计数之后，行数也将取决于宽度。您也可以将其设置为100%，但行数将根据窗口大小而更改。要将行数限制为2，可能需要UL的固定宽度。

下面是一个使用

显示：flex

和

flex-direction:row

将顺序从列更改为行的示例：

#列表-1{
边框：3倍纯红；
栏目：2个；
柱间距：5px；
宽度：200px；
}
#清单2{
边框：3件纯蓝；
栏目：2个；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
高度：自动；/*可以更改此值*/
宽度：200px；
}
#表2李{
宽度：100px；
高度：自动；
}

a
b
c
d
e
f
g


a
b
c
d
e
f
g

我知道这个问题已经有7年历史了，但是如果今天有人有类似的问题，那么这里有一个使用CSS网格布局的解决方案（）

---

我认为{OL tag特指}最简单、最恰当的方式是：

<ul>
  <div class="row">
    <div class="col-6">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </div>
    <div class="col-6">
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </div>
   </div>
</ul>

一个
两个
三
四
五
六

@JoshPowell:我讨论过：我不知道我将拥有的项目数量，因此如果有7个或更多项目，

列计数将使我拥有多于两行。啊，我明白了，我明白了，所以你想要无限多的行以最适合内容，对吗？请参阅我的编辑：我总是想要两行，并且需要多少列。嗯，我会尝试一些想法。这不能在CSS中完成；你需要javascript。但这是一个很好的问题，所以被高估了。你需要一个合适的工具来完成这项工作。如果我有7个或更多的项目，这将分成两行以上，不是吗？这一行永远不会中断，它甚至会将6个项目的列表分成3行！如果你有7个项目，你将有3行，2整行3个项目和1行与剩余的一个项目，项目数除以3，四舍五入小数将得到你的行数（我告诉过你兄弟！）您可以使用函数进行计算，也可以使用JS获取子值！比方说，7！然后您可以将
最大宽度
增加到
230px
。：）啊，我知道我要试试，即使我更喜欢CSS-only。好的，等等！我有一个新的提琴给你，如果你添加更多的内容，你仍然会得到一系列的列表：）等等。。在这里，试试这个：你会看到7个元素一个接一个地对齐。是的，这是一个三行的答案！谢谢，我更喜欢CSS解决方案，但如果不可能的话，简单的JS就可以了：）我已经更新了我的答案，使用简单的javascript而不是jquery，以防你决定继续使用这种方法：）但是我没有很好地测试javascript方法，您可能需要稍微使用它才能使其按预期工作。它只对我有效，当我将列计数转换为字符串时，谢谢！我不想要固定数量的列，而是固定数量的行。啊。。。我懂了。。。要使用此方法，确保只有2行的唯一方法是为ul提供一个特定的高度，您将拥有该高度（根据问题）。在我的小提琴里，我做的
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 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

<ul>
  <div class="row">
    <div class="col-6">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </div>
    <div class="col-6">
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </div>
   </div>
</ul>