移动第二列中的li项-仅CSS

Question

我有UL和LI列表和最大项目数量是10，我正在尝试移动项目，如果超过5到第二列和只想使用CSS处理，我尝试与CSS3‘列’，但它在第二列所有项目，我如何确保移动项目超过5到第二列

问题是，只有当LI大于5li时，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>

​

Answer 1

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>

​

Answer 2

您可以考虑使用最大高度等于5个项目的高度的flexbox和列方向：

​

.listItems {
  list-style: none;
  margin: 0;
  padding: 0;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  max-height:calc((1.2em + 8px)*5);
  border:1px solid;
  margin:5px;
}
.listItems li {
  color: #000;
  text-decoration: none;
  display: block;
  padding: 4px 0;
  line-height:1.2em;
}

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

​