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

Question

使用960.gs框架,我正在尝试创建一个两个列的有序列表,其中每个列表项包含一个标题和段落,编号遍历,而不是向下,例如,顶行包含1,2而不是1,3.我能让它工作的唯一方法是在OL和LI元素之间放置一个DIV.这感觉不对,我确定它错了,虽然我不确定为什么.实现这一目标的正确方法是什么？我有以下标记;

<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

将div元素放在ol标记内是无效的.

li那里只允许使用元素..(查看列表中的W3C文档)

该理论是用的

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

演示http://jsfiddle.net/gaby/ZKdpf/1/

对于960.gs您应该使用的系统

<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>

并添加你的CSS

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

再次显示数字..

演示在http://jsfiddle.net/gaby/ZKdpf/2/

更新

事实上,正如你在评论中提到的,你需要清除每两个元素,因为元素的高度li不一样.

对于现代浏览器,您应该添加

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

或者您可以在类中转换它并将其添加到奇数li元素.