我让一个ul使用columns
将其拆分成两列.该列表的列表项数量不均匀,但我希望奇数列表项位于右栏,而不是左栏.这个是可能的吗?
ul {
list-style-type:none;
margin:0;
padding:0;
columns:2;
}
<ul>
<li>Left</li>
<li>Left</li>
<li>Right</li>
<li>Right</li>
<li>Right</li>
</ul>
我让一个ul使用columns
将其拆分成两列.该列表的列表项数量不均匀,但我希望奇数列表项位于右栏,而不是左栏.这个是可能的吗?
ul {
list-style-type:none;
margin:0;
padding:0;
columns:2;
}
<ul>
<li>Left</li>
<li>Left</li>
<li>Right</li>
<li>Right</li>
<li>Right</li>
</ul>
您可以在数字为奇数时添加一个伪元素以使其成为偶数,并强制第二列包含更多项.两者都有相同数量的条目,但第一个条目将包含伪元素.
ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 2;
margin: 10px;
}
ul:has(> :last-child:nth-child(odd))::before {
content: "";
display: block;
height:.1px;
}
<ul>
<li>Left</li>
<li>Left</li>
<li>Right</li>
<li>Right</li>
<li>Right</li>
</ul>
<ul>
<li>Left</li>
<li>Left</li>
<li>Right</li>
<li>Right</li>
</ul>