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>

Answer 2

呼。这是我的fiddle。这可能会使用一些改进，但它应该做你需要的。

对不起。我没有解释我在做什么。基本上，我创建了一个'行'的2D数组 - 由每行中适合的项数决定。我将行反转并将它们放回原始列表中。

我唯一不太满意的是推动空<li>以迫使第二行适当地破坏。

欢迎任何改进。谢谢你看看。

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

2 个答案: