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

我想要一个有序的列表,为数字提供比li元素更大的字体大小.

我已经实现了这一点,但我不知道如何将li元素内容与数字的顶部对齐.

看一看：

我已经尝试给ol li p负上限,但这没有工作.此外,ol li有一个顶部的边距,但如果我把它设置为0,它不做任何事情.我目前的html是：

<ol>  
<li>
<p>content</p>
</li> 
<li>
<p>more content</p>
</li> 
</ol>

和我的CSS：

ol {
padding-top: 200px;
}
ol li {
color: #EEEDED;
font-size: 35px;
font-weight: bold;
font-style: italic;
margin-top: 5px;
line-height: 1;

}
ol li p {
font-size:  11px;
color:  #444444;
font-weight: normal;
font-style: normal;
line-height: 1.7em;
}

有任何想法吗？？

解决方法

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

>应用显示：内嵌块到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; }

示例标记：

<div>
  <ol>
    <li>
      <p>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.</p>
     </li>
    <li>
      <p>Lorem ipsum dolor sit amet,cursus ac libero. Donec accumsan viverra libero quis molestie.</p>
     </li>
  </ol>
</div>

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <Meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <style type="text/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; }

    </style>
    </head>
    <body>
        <div>
            <ol>
                <li>
                    <p>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.</p>
                </li>
                <li>
                    <p>Lorem ipsum dolor sit amet,cursus ac libero. Donec accumsan viverra liber
o quis molestie.</p>
                </li>
            </ol>
        </div>
    </body>
</html>

原文地址：https://www.jb51.cc/css/217381.html

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

解决方法

相关推荐