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