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

Question

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

通常以这种方式呈现：

  

Item1 Item2 Item3 Item4 Item5 Item6 Item7

     

Item8 Item9

如何实现以下目标？

  

Item8 Item9

     

Item1 Item2 Item3 Item4 Item5 Item6 Item7

我在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-Tags成功完成了这项工作。请记住渲染“li” - 标签，也可以“显示：内联”...祝你好运！

---

好的，它有效：）

<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”。