如何在CSS显示内联块中断后控制新行位置

Question

这是我要做的事情:

我有一个使用无序列表创建的水平菜单,其中列表元素显示为内联块.该列表具有固定的宽度.

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

该解决方案transform: scaleY(-1)同时用于UL和LI.首先,整个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>