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

Answer 2

你有'感觉不对'的权利。列表包含列表项，没有其他内容。我认为实现水平编号的最简单方法是浮动你的LI。

Answer 3

以上源代码错误。你不能在

之间放置任何其他东西

<ol></ol>

除了

 <li></li>

元素。您可能必须找到另一种方式来确定列表的样式。

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

3 个答案: