gpt4 book ai didi

html - 列表元素底部对齐

转载 作者:行者123 更新时间:2023-11-28 15:05:10 25 4
gpt4 key购买 nike

我想使用 <li> 制作 2 个或更多级别的高标签页但让他们从下往上成长。我有这个

div{
width: 200px;
border: 1px solid black;
}

ul{
margin: 0px;
padding: 0px;
}

li{
margin: 2px;
width: 20px;
display: inline-block;
}
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>

但我需要:

1 2 3
4 5 6 7 8 9 10

有没有不用js的方法呢?

最佳答案

如果您可以反转您的 li 顺序,我可以使用 wrap-reverserow-reverse 的组合来让它工作显示:flex

ul {
list-style: none;
display: flex;
width: 100px;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
justify-content: flex-end;
}

li {
margin-left: 2px;
margin-right: 2px;
}
<html>
<body>
<ul>
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</body>
</html>

关于html - 列表元素底部对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58683894/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com