How to control new line position after CSS display inline-block break

Question

Here's the thing I'm trying to do:

I have a horizontal menu created with an unordered list, in which the list elements are displayed as inline-block. The list has a fixed width.

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

When the total width of the list elements exceeds the lists width, the line breaks and a new line is created. What I would like to do is to control the position of this new line so that after it's created it is OVER the first line and not under. Maybe this will be clearer:

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

I have a hunch that this can't be done with CSS alone, so a combined CSS+jQuery solution would do.

Any help would be much appreciated.

`var $ul = $('ul'); $ul.children().each(function(i, $li){ $ul.prepend($li) });` from: http://stackoverflow.com/questions/5347839/jquery-reversing-the-order-of-child-elements — Stefan, Jan 23 '12 at 14:39
@Stefan this would invert the order in the lines as well, not just between them — Illes Peter, Jan 23 '12 at 15:32

shaunsantacruz · Accepted Answer · 2012-02-11T01:58:59.440

5

A css solution: DEMO

This solution uses transform: scaleY(-1) on both the UL and the LIs. First, the entire UL is flipped, then each LI is flipped again. A double inverse.

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>

edited Feb 11 '12 at 01:58

answered Feb 11 '12 at 00:49

shaunsantacruz

8,903
3
19
19

wow. that's cool. i'm totally impressed :) is it cross-browser? i remember having some problems with transform before... – Tracy Fu Feb 11 '12 at 00:54
2

ie6 is not a browser. it's an abomination. i've erased it from my memory. awesome solution. – Tracy Fu Feb 11 '12 at 02:23
Fantastic :-) You get the tick :D – Illes Peter Mar 05 '12 at 16:07

Tracy Fu · Answer 2 · 2012-02-11T00:14:11.930

Whew. Here's my fiddle. This could probably use some improvement, but it should do what you need.

Sorry. I didn't explain what I was doing. Basically, I created a 2D array of 'rows' -- determined by how many items fit in each row. I reversed the rows and put them back in the original list.

The only thing that I'm not really that comfortable with is pushing an empty <li> to force the second row to break appropriately.

Any improvements are welcome. Thanks for taking a look.

How to control new line position after CSS display inline-block break

2 Answers2