Question

利用960.gs框架,Im试图建立一个两列单,每个清单项目都包含一个标题和段落,编号范围不一,例如上行有1 2而不是1 3。我能够做到这一点的唯一途径是在远洋运输公司和利比里亚电力公司之间架设公交钥匙。尽管我无法确定原因,但我肯定这是错误的。实现这一目标的正确途径是什么? 下面是一栏。

<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 tag是无效的。

只有li 元素才允许在其中使用(。

理论是使用

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

http://jsfiddle.net/gaby/ZKdpf/1/“rel=“nofollow” 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>

页: 1

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

重新显示数字。

http://jsfiddle.net/gaby/ZKdpf/2/“rel=“nofollow” 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

以上源代码过期。你们可以把任何东西放在一起。

<ol></ol>

except

 <li></li>

内容。您最好还必须找到另一种方式,来描述你们的名单。

友情链接