有没有办法可以限制多列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 返回的行数?