在第二栏中移动li项-仅CSS [英] Move li items in second column - CSS Only
问题描述
我有 UL
和 LI
列表,最大项目数是10,我正在尝试移动这些项目如果超过5列到第二列,并且只想使用CSS处理,我尝试使用CSS3列,但它与所有项目都列在第二列中,如何确保将超过5列的项目移至第二列
I have UL
and LI
list and max item number is 10, and I am trying to move the items if more than 5 to second column and wanted to handle using CSS only, I tried with CSS3 'Column' but its going in second column with all items, how do I make sure to move the items more than 5 to second column
问题是,仅当li大于5且li小于或等于5时,LI才应显示在第二列中
The problem is, LI should appear in second column only if more than 5 li and if li is 5 or less than then it should be one column
.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
。
CSS-Grid can manage that for you. Just define the number of rows you want and set the flow direction to 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>
这篇关于在第二栏中移动li项-仅CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!