html - 创建一个两列的有序列表。我可以在 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 元素.. ( check the W3C documentation on lists )

理论就是用

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 元素。