在有序列表中操纵数字的位置

Question

我有以下HTML

<h1> Dummy title here</h1>
<ol>
<li>
<p>Dummy paragraph here with lots of lines...</p>
</li>
<li>
<p>Another dummy paragraph with lots of lines...</p>
</li>
</ol>

我希望像显示的图像一样设计样式。 http://i.imgur.com/fOhom.jpg

问题在于我无法找到将数字降低到段落级别的方法。相反，他们从每个段落的第一行开始，最终得到了不想要的结果。

请问任何指导？

**

修改

**

我相信我已经提出了一个可能的解决方案，不是100％符合标准，因为我使用的是伪类，但它仍然是一个可行的解决方案。所以就是这样。

完全按照我在问题中描述的那样使用结构，我提出了以下CSS

ol {
list-style: none;
}
ol li {
counter-increment: item;
}
ol p:before {
content: counter(item);
font-size: 80px;
float:left;
margin-right:10px;
}

正如桑迪普所要求的，这是一个jsfiddle http://jsfiddle.net/sm8AT/

Answer 1

你能尝试的是这个。使用非常大的字体为您的有序列表设置样式，以便数字具有较大的字体。然后使用更小的字体为段落设置样式。像这样：

ol { font-size: 22px; }
ol p { font-size:  9px; }

没有测试过这个，只是一个建议。您可能还需要使用段落的位置。