Question

<ul>
    <li>
       <div id='div1'><div>
       <div id='div2'><div>
    </li>
    <li>
       <div id='div3'><div>
       <div id='div4'><div>
    </li>
    <li>
       <div id='div5'><div>
       <div id='div6'><div>
    </li>
</ul>

Above html will design following design

 li li li
|__|__|__| -> odd DIVs
|__|__|__| -> even DIVs

I want to merge all the odd DIVs and place some text on the top of it.

 li li li
 |__|__|__| -> odd DIVs
 |__|__ __| -> even DIVs

Is there any way to do this?

Thanks

Answer 1

Try using this:

li {
    display: inline-block;
}
li div:last-child {
    display: inline;
}

Ive tested it in Firefox 5 only, and it seems to work.

See an example here http://jsfiddle.net/ffESR/