您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何在两行中显示列表?

如何在两行中显示列表?

这是使用jquery的一种简单方法。我知道有人提到需要CSS方式,但是如果有人想参考这个问题,这仅供以后参考。

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

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

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

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

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

在这里摆弄

使用简单的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);

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

其他 2022/1/1 18:19:16 有577人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶