创建两列有序列表。我可以在OL和LI标签之间放置DIV吗？

Question

Using the 960.gs framework, I'm trying to create a two columned ordered list where each list item contains a heading and paragraph and the numbering goes across, not down eg the top row contains 1,2 not 1,3. The only way I can get it to work is to put a DIV between the OL and LI elements. This doesn't feel right, I'm sure its wrong although I'm not sure why. What is the correct way to achieve this? I've got the following markup;

<div class="container_16">
<ol>
    <div class="grid_8">
        <li><h2>Heading</h2>
            <p>Paragraph</p>
        </li>
    </div>
    <div class="grid_8">
        <li><h2>Heading</h2>
            <p>Paragraph</p>
        </li>
    </div>
    <div class="clear"></div>
    <div class="grid_8">
        <li><h2>Heading</h2>
            <p>Paragraph</p>
        </li>    
    </div>
    <div class="grid_8">
        <li><h2>Heading</h2>
            <p>Paragraph</p>
        </li>    
    </div>
    <div class="clear"></div>
</ol>
</div>

Answer 1

It is invalid to place div elements inside the ol tag.

Only li elements are allowed in there.. ( check the W3C documentation on lists )

The theory is to use

ol{width:200px;}
li{float:left;width:50%;}

demo at http://jsfiddle.net/gaby/ZKdpf/1/

---

For the 960.gs system you should use

<ol class="container_16">
    <li class="grid_8">first</li>
    <li class="grid_8">second</li>
    <li class="grid_8">third</li>
    <li class="grid_8">fourth</li>
    <li class="grid_8">fifth</li>
    <li class="grid_8">sixth</li>
</ol>

and add in your css

ol.container_16 li.grid_8{
   display:list-item;
}

to show the numbers again..

demo at http://jsfiddle.net/gaby/ZKdpf/2/

---

Update

Indeed as you mention in your comment you need to clear every two elements, since the height of the li elements is not the same..

For modern browsers you should add

.benefits li:nth-child(odd) {
    clear: left;
}

or your can turn that in a class and add it to the odd numbered li elements.

Answer 2

You right to 'feel wrong'. Lists contain list-items and nothing else. The easiest way, I think to achieve a horizontal numbering, is to float your LIs.

Answer 3

The above source code is wront. You can't place anything else between

<ol></ol> 

except

 <li></li>

elements. You propably have to find another way to style out your lists.