Question

在ul元素中，溢出时是否可以让列表项自动向右移动？例如，假设有一个高度为300px的无序列表。列表元素的总高度（包括边框+填充+边距）为60px。如果有4个列表元素，则从上到下列出。但是有可能在新列上开始额外的列表元素吗？例如，如果有六个，请将一个放在右边的新列中？我试过研究这个，却一无所获。也许它与display有关？

Answer 1

您可以使用下面显示的设置将ul定义为弹性容器

ul {
  max-height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

li {
  box-sizing: border-box;
  flex-grow: 0;
  height: 60px;
  border: 1px solid #ddd;
}

<ul>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
</ul>

自动重定位溢出内容的CSS列

1 个答案: