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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了有没有办法可以限制多列ul显示中的行数?相关的知识,希望对你有一定的参考价值。

这是我到目前为止所尝试的:

$('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>

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

但我试图限制行数并完成了我的研究,但我找不到任何解决方案。

寻找主要的CSS解决方案,但也接受javascript

答案

它看起来像你想要的:

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>
另一答案

您的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>
另一答案

您可以将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>

以上是关于有没有办法可以限制多列ul显示中的行数?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 JDBC 数据源级别限制从 Oracle 返回的行数?

使用 Fill in ADOMD 限制检索的行数

限制 Ingres 选择查询中检索的行数

Xcode:如何快速判断哪些文件的行数超出了最大列限制?

有没有办法根据 Python 中的一列或多列中具有相似值的行来选择表中的某些行?

严格限制 textarea Angular 中的行数