jquery - CSS显示内联 block 中断后如何控制换行位置

Question

这是我正在尝试做的事情:

我有一个用无序列表创建的水平菜单，其中列表元素显示为行内 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 解决方案就可以了。

任何帮助将不胜感激。

Answer 1

CSS 解决方案:DEMO

此解决方案在 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>