[英]Manipulate the position of the number in an ordered list
I have the following HTML 我有以下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>
And I want to style it like the image shown. 我想像显示的图像一样对它进行样式设置。 http://i.imgur.com/fOhom.jpg
http://i.imgur.com/fOhom.jpg
The problem is that I cannot find a way to bring the numbers down to the paragraphs level. 问题是我找不到将数字降低到段落级别的方法。 Instead they start from each paragraph's first line and I end up with an unwanted result.
相反,它们从每个段落的第一行开始,而我最终得到了不良结果。
Any guidance please? 有什么指导吗?
** **
** **
I believe I have come up with a possible solution, not 100% compliant with the standards as I use a pseudo-class but still it is a viable solution. 我相信我想出了一个可行的解决方案,虽然我使用的是伪类,但并非100%符合标准,但仍然是可行的解决方案。 So here it is.
就是这样
Using the structure exactly as I described it in my question I have come up with the following CSS 完全按照我在问题中所描述的那样使用结构,我提出了以下CSS
ol {
list-style: none;
}
ol li {
counter-increment: item;
}
ol p:before {
content: counter(item);
font-size: 80px;
float:left;
margin-right:10px;
}
As sandeep requested, here's a jsfiddle http://jsfiddle.net/sm8AT/ 根据Sandeep的要求,这是jsfiddle http://jsfiddle.net/sm8AT/
What you can try is this. 您可以尝试的是这个。 Style your ordered list with a very large font so that the numbers have a large font.
用一个非常大的字体设置您的订购列表样式,以便数字具有一个大字体。 Then style the paragraph within with a much smaller font.
然后使用小得多的字体在段落中设置样式。 Something like this:
像这样:
ol { font-size: 22px; }
ol p { font-size: 9px; }
Haven't tested this, but just a suggestion. 还没有测试,只是一个建议。 You may also need to play around with the positioning of the paragraph as well.
您可能还需要修改段落的位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.