html有序列表序号字体大小,css – 对不同字体大小的排序列表编号进行样式化

这可以通过以下方式解决：

>应用显示：内嵌块到P元素

>将垂直对齐：中间应用于P元素

这使得P元素能够共享内联和块级特性,允许垂直对齐功能正确(在所有文本块上,作为一个整体).

示例CSS：

ol { margin-left: 100px; }

li { font-size: 4em; }

p { display: inline-block; vertical-align: text-top; font-size: 0.25em; line-height: 1.5; padding-left: 2em; }

div { width: 50%; margin-left: -25%; left: 50%; position: relative; }

示例标记：

1. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vivamus odio eros,pretium id congue condimentum,aliquam et justo. Donec molestie tempus mi,et gravida mi tempus non. Fusce commodo,metus sit amet pulvinar pretium,ante lorem varius nulla,at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Phasellus mauris odio,tristique cursus pharetra quis,volutpat ut arcu. Mauris scelerisque vehicula ante,sit amet placerat sem viverra ut. Maecenas risus purus,dictum ac accumsan quis,cursus ac libero. Donec accumsan viverra libero quis molestie.

2. Lorem ipsum dolor sit amet,cursus ac libero. Donec accumsan viverra libero quis molestie.

注意：显示：inline-block在Firefox 2中不起作用 – 另一种方法是使用display：-moz-inline-Box

编辑：替换“vertical-align：middle”与’vertical-align：text-top;’以排列每个段落顶部的数字.

编辑2：对于非信徒来说,这里是上下文中的CSS和标记 – >复制,粘贴,查看

ol { margin-left: 100px; }

li { font-size: 4em;}

p { display: inline-block; vertical-align: text-top; font-size: 0.25em; line-height: 1.5; padding-left: 2em;}

div { width: 50%; margin-left: -25%; left: 50%; position: relative; }

1. Lorem ipsum dolor sit amet,metus sit amet pu

   lvinar pretium,at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate

   accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Ph

   asellus mauris odio,cursus ac libero. Donec accumsan viverra liber

   o quis molestie.

2. Lorem ipsum dolor sit amet,cursus ac libero. Donec accumsan viverra liber

   o quis molestie.