首页 文章

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

提问于
浏览 次
0

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

通常它以这种方式呈现：

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%; }
css list

2 回答

  • 0

    也许你可以尝试将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” .

    回复于
  • 1

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

    回复于

相关问题