0

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

通常它以这种方式呈现：

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

2 回答 2

1

如果没有绝对定位元素，无序列表就不能做你想做的事。元素只能按照它们在 HTML 中呈现的顺序出现。

于 2012-10-05T17:41:45.967 回答
0

也许您可以尝试将 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”具有“位置：绝对”属性，则它不起作用。如果需要，请尝试包装另一个元素，例如 ul 周围的“div”。

于 2013-03-26T13:11:24.253 回答