从底部开始渲染水平列表项

Posted 2023-02-24

【中文标题】从底部开始渲染水平列表项

【英文标题】：Render horizontal list items starting at the bottom

【发布时间】：2012-09-26 11:04:57

【问题描述】：

如何创建一个多行无序列表，其底行包含列表项的全宽？

通常以这种方式呈现：

项目1项目2项目3项目4项目5项目6项目7

第 8 项第 9 项

我怎样才能实现以下目标？

第 8 项第 9 项

项目1项目2项目3项目4项目5项目6项目7

我在 CSS 中尝试过的是：

.footer  width: 500px; overflow: hidden; background-color:#ccc; 
.footer ul  list-style: none; position: relative; float: left; display: block; left: 50%; 
.footer ul li  position: relative; float: left; display: block; right: 50%; 

【问题讨论】：

您使用的是哪种语言，您尝试过什么？

刚刚更新了帖子，提供了更多信息。不确定我是否可以使用 UL 来做到这一点

【参考方案1】：

如果没有对元素进行绝对定位，无序列表就无法满足您的需求。元素只能按照它们在 html 中呈现的顺序出现。

【参考方案2】：

也许您可以尝试将 ul 渲染为“显示：表格单元格”，因此您可以使用“垂直对齐：底部” - 但我不知道它是否会起作用。我已经用 DIV-Tags 成功地做到了这一点。记住也要渲染“li”-Tags，可能是“display: inline”……祝你好运！

---

好的，成功了:)

<ul style="display: table-cell; width: 200px; height: 250px; vertical-align: bottom;">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

会给你一个列表，它从 ul 的定义区域（宽 x 高）的底部开始。

注意：如果 "ul" 具有 "Position: absolute" 属性，则它不起作用。如果需要，请尝试在 ul 周围包裹另一个元素，例如“div”。