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

Question

如何创建多行无序列表，其底行包含列表项的完整宽度？

通常，它以这种方式呈现：

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

Item8 Item9

如何实现以下目标？

Item8 Item9

项目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%; }

Answer 1

没有元素的绝对定位，无序列表将无法完成您想要的操作。 元素只能以它们在HTML中呈现的顺序出现。

Answer 2

也许您可以尝试将ul渲染为“ display：table cell”，所以可以使用“ vertical-align：bottom”-但我不知道这是否可行。 我已经使用DIV标签成功完成了此操作。 请记住也要渲染“ li”标记，也可以将其显示为“ 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”。