我想构建一个带有x轴溢出的列表,其中每个列表元素都显示在父div内的新列中,这个jsfiddle有一个示例:
https://jsfiddle.net/h06h5jzy/1/
这是我当前的代码:
#testDiv{
width:200px;
height:200px;
background:#DDD;
}
ul{
width:100%
list-stype-type:none;
padding:0;
overflow:visible;
}
ul li{
width:100%;
background:blue;
text-align:center;
float:left;
display:inline;
}
使用 CSS 多列属性不起作用,因为我的列表中会有动态数量的元素。我也尝试了 float:left 用于列表元素,但没有成功。
如何实现这一点?
像这样?
#testDiv {}
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 200px;
height: 200px;
list-style-type: none;
padding: 0;
overflow: visible;
}
ul li {
width: 100px;
height: 100%;
background: blue;
}
<div id="testDiv">
<ul>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
</ul>
</div>