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

时间:2018-05-30 22:40:00

标签: html css css3 responsive-design

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

1 个答案:

答案 0 :(得分:3)

您可以使用下面显示的设置将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>