CODEWITHSUNDEEP
jquerycss
Illes Peter
Illes Peter

Reputation: 1674

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

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.

Upvotes: 3

Views: 2939

Answers (2)

shaunsantacruz
shaunsantacruz

Reputation: 8930

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>

Upvotes: 5

Tracy Fu
Tracy Fu

Reputation: 1662

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.

Upvotes: 1

Related Questions