有没有办法限制多列 ul 显示中的行数

Question

这是我到目前为止尝试过的：

$('ul').filter(function() {
  return this.childNodes.length > 5
}).addClass('twoColumns');

ul.twoColumns {
  list-style: none;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

这与我从另一个堆栈溢出问题中引用的代码相同。这是链接。

但是我试图限制行数并进行了研究，但我找不到任何解决方案。

寻找主要是CSS解决方案，但也接受JavaScript。

Answer 1

看起来以下内容是您想要的：

var numitems =  $("li").length; //get the amount of li elements, but you can be a little more specific depending on what your html structure is like  
$("ul").css("column-count",numitems/2); //then just divide that by two and give that as the column count to your ul

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

注意：我不一定会走这条路。我会看看css-grid或flexbox

更多信息：我不会走这条路的原因是ul没有最大的支持来做到这一点，而像 css grid 这样的东西可以开箱即用地做这样的事情。有一点学习曲线，我可以看到一些场景比它更可取，但我决定提到它，因为它值得考虑。

Answer 2

你的 JS 代码有问题。你可以用jQuery的方式做到这一点。尝试$(this).children()而不是this.childNodes。

$('ul').filter(function() {
    return $(this).children().length > 5;
}).addClass('twoColumns');

ul.twoColumns {
    list-style: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<br><br>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Answer 3

您可以按如下方式将 CSS 网格视为具有定义的行数：

ul {
  display:grid;
  grid-template-rows:1fr 1fr; /*2 equal rows*/
  grid-auto-flow:column;
  list-style:none;
}
li {
  padding:5px 10px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>