I have UL and LI列表和最大项目数为 10，如果超过 5 个项目，我试图将项目移动到第二列，并且只想使用 CSS 进行处理，我尝试使用 CSS3 'Column'，但它与所有项目一起进入第二列，如何做我确保将超过 5 个的项目移至第二列
问题是，仅当 LI 大于 5 li 时，LI 才应出现在第二列，如果 li 小于或等于 5，则应为一列
.listItems {
list-style: none;
margin: 0;
padding: 0;
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
.listItems li {
color: #000;
text-decoration: none;
display: block;
padding: 4px 0;
}
<ul role="menu" class="listItems">
<li><a href="javascript;;">List Item 1</a></li>
<li><a href="javascript;;">List Item 2</a></li>
<li><a href="javascript;;">List Item 3</a></li>
<li><a href="javascript;;">List Item 4</a></li>
<li><a href="javascript;;">List Item 5</a></li>
<li><a href="javascript;;">List Item 6</a></li>
<li><a href="javascript;;">List Item 7</a></li>
<li><a href="javascript;;">List Item 8</a></li>
<li><a href="javascript;;">List Item 9</a></li>
<li><a href="javascript;;">List Item 10</a></li>
</ul>
CSS-Grid 可以为您管理。只需定义所需的行数并将流向设置为column.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
ul {
list-style: none;
display: inline-grid;
grid-template-rows: repeat(5, auto);
grid-auto-flow: column;
border: 1px solid grey;
}
li {
padding: .25em;
}
<ul role="menu" class="listItems">
<li><a href="javascript;;">List Item 1</a></li>
<li><a href="javascript;;">List Item 2</a></li>
<li><a href="javascript;;">List Item 3</a></li>
<li><a href="javascript;;">List Item 4</a></li>
</ul>
<ul role="menu" class="listItems">
<li><a href="javascript;;">List Item 1</a></li>
<li><a href="javascript;;">List Item 2</a></li>
<li><a href="javascript;;">List Item 3</a></li>
<li><a href="javascript;;">List Item 4</a></li>
<li><a href="javascript;;">List Item 5</a></li>
<li><a href="javascript;;">List Item 6</a></li>
<li><a href="javascript;;">List Item 7</a></li>
<li><a href="javascript;;">List Item 8</a></li>
<li><a href="javascript;;">List Item 9</a></li>
<li><a href="javascript;;">List Item 10</a></li>
</ul>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
