gpt4 book ai didi

html - 使用 CSS 从底部到顶部 float div?

转载 作者:行者123 更新时间:2023-11-28 03:57:09 26 4
gpt4 key购买 nike

我正在显示一组需要包装在响应式布局中的选项卡。是否可以将它们包裹起来,使其与底部对齐?

这是他们目前的包装方式:

enter image description here

我想消除顶行下方的空间,以便顶部只有 1 个选项卡,底部只有 4 个选项卡。这是一个响应式布局,因此需要流畅。我正在寻找纯 CSS 解决方案。

这是我的代码:

#tabs {
border:1px solid red;
padding:0 5px 5px 5px;
}

#tabs ul {
list-style:none;
margin:0;
padding:0;
}

#tabs li {
float:left;
margin:5px 0 0 -1px;
border:1px solid #ccc;
padding:5px 10px;
}

<div id="tabs">
<ul>
<li><a href="#"><span>Tab 1</span></a></li>
<li><a href="#"><span>Tab 2</span></a></li>
... etc ...
</ul>
<div style="clear:both;"></div>
</div>

这是一个 jsfiddle:http://jsfiddle.net/PGypn/

最佳答案

您可以使用此 CSS3 属性:flex-wrap: wrap-reverse

#tabs ul {
display: flex;
flex-wrap: wrap-reverse;
list-style:none;
margin:0;
padding:0;
}
#tabs li {
margin:5px 0 0 -1px;
border:1px solid #ccc;
padding:5px 10px;

}
#tabs {
border:1px solid red;
padding:0 5px 5px 5px;
}
<div id="tabs">
<ul>
<li><a href="#"><span>Tab 0</span></a>
</li>
<li><a href="#"><span>Tab 1</span></a>
</li>
<li><a href="#"><span>Tab 2</span></a>
</li>
<li><a href="#"><span>Tab 3</span></a>
</li>
<li><a href="#"><span>Tab 4</span></a>
</li>
<li><a href="#"><span>Tab 5</span></a>
</li>
<li><a href="#"><span>Tab 6</span></a>
</li>
<li><a href="#"><span>Tab 7</span></a>
</li>
<li><a href="#"><span>Tab 8</span></a>
</li>
<li><a href="#"><span>Tab 9</span></a>
</li>
</ul>
</div>

fiddle

关于html - 使用 CSS 从底部到顶部 float div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43402591/

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