在第二栏中移动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屋！