如何在CSS display inline-block break后控制换行位置

Question

我需要做的事情是：

我有一个使用无序列表创建的水平菜单，其中列表元素显示为inline-block。该列表具有固定宽度。

ul { width: 980px; }
li { display: inline-block; }

当列表元素的总宽度超过列表宽度时，会出现换行并创建新行。我想做的是控制这个新行的位置，使其在创建后覆盖第一行而不是在下面。也许这样更清晰：

3rd line: item7 item8
2nd line: item4 item5 item6
1st line: item1 item2 item3

我有一种预感，这件事无法仅使用CSS完成，所以需要结合CSS+jQuery的解决方案。

非常感谢任何帮助。

- Illes Peter

---

var $ul = $('ul'); $ul.children().each(function(i, $li){ $ul.prepend($li) }); 从：https://dev59.com/9m435IYBdhLWcg3wjwzS - Stefan

@Stefan这会逆转行的顺序，而不仅仅是它们之间的顺序。 - Illes Peter

Answer 1

一种 CSS 解决方案：演示 这个解决方案在 UL 和每个 LI 上都使用了 transform: scaleY(-1)。首先，整个 UL 被翻转，然后每个 LI 再次翻转。双重反转。

CSS

ul, ul li {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
}
ul {
    width: 300px;
}
 li {
    display: inline-block;
    width: 95px;
    zoom: 1;          /* Trigger hasLayout in ie7 */
    *display: inline; /* Trigger hasLayout in ie7 */
}

HTML

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>

- shaunsantacruz

---

哇，太酷了。我非常印象深刻 :) 它是跨浏览器的吗？我记得以前使用 transform 时遇到过一些问题... - Tracy Fu

IE6不是一个浏览器，它是一种灾难。我已经将其从我的记忆中抹去了。太棒了解决方案。 - Tracy Fu

太棒了 :-) 你得到了勾选 :D - Illes Peter

Answer 2

哇，这是我的fiddle。它可能需要一些改进，但应该能够满足您的需求。

抱歉，我没有解释我在做什么。基本上，我创建了一个二维数组，由每行可以容纳多少个项目来确定。我反转了行并将它们放回原始列表中。

唯一让我不太舒服的事情是推送一个空的<li>以适当地打破第二行。

欢迎任何改进意见。感谢您的查看。

- Tracy Fu