CSS 使用与内容不同的字体大小来设置有序列表编号的样式

Styling ordered list numbers with a different font size than content

提问by agente_secreto

I want to style an ordered list giving the numbers a much more bigger font size than the li elements content.

我想设置一个有序列表的样式，使数字的字体大小比 li 元素内容大得多。

I have already achieved this but I dont know how to align the li elements content with the top of the numbers.

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

Take a look:

看一看：

I have tried giving ol li p negative top margin, but that doesnt work. Also, ol li has a top margin but if i set it to 0 it doesnt do anything. My current html is:

我试过给 ol li p 负上边距，但这不起作用。此外，ol li 有一个上边距，但如果我将它设置为 0，它不会做任何事情。我目前的 html 是：

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

And my CSS:

还有我的 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;
}

Any ideas??

有任何想法吗？？

采纳答案by codeinthehole

This can be solved by:

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

1. applying display: inline-blockto the P element
2. applying vertical-align: middleto the P element

1. 应用于display: inline-blockP 元素
2. 应用于vertical-align: middleP 元素

This enables the P element to share inline andblock-level characteristics, allowing the vertical-align to function correctly (on all the block of text, as a whole).

这使 P 元素能够共享行内和块级特性，从而允许垂直对齐正确运行（在所有文本块上，作为一个整体）。

Example CSS:

示例 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; }

Example markup:

示例标记：

<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, 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, 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>
  </ol>
</div>

---

---

Note: display: inline-blockdoesn't function in Firefox 2 - an alternative is to use display: -moz-inline-box

注意：display: inline-block在 Firefox 2 中不起作用 - 另一种方法是使用display: -moz-inline-box

EDIT: replaced 'vertical-align: middle;' with 'vertical-align: text-top;' to line up numbers with the top of each paragraph.

编辑：替换“垂直对齐：中间；” 使用“垂直对齐：文本顶部；” 将数字与每个段落的顶部对齐。

EDIT 2: For the non-believers, here is the CSS and markup in context -> copy, paste, view

编辑 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, 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 pu
lvinar 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. Ph
asellus 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 liber
o quis molestie.</p>
                </li>
                <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 pu
lvinar 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. Ph
asellus 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 liber
o quis molestie.</p>
                </li>
                <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 pu
lvinar 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. Ph
asellus 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 liber
o quis molestie.</p>
                </li>
                <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 pu
lvinar 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. Ph
asellus 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 liber
o quis molestie.</p>
                </li>
            </ol>
        </div>
    </body>
</html>

回答by reisio

http://w3.org/TR/CSS21/visudet.html#propdef-vertical-align

http://w3.org/TR/CSS21/visudet.html#propdef-vertical-align

Edit: now with example (http://www.webdevout.net/test?01m&raw):

编辑：现在举例（http://www.webdevout.net/test?01m&raw）：

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
html {
    background: #cccccc;
}
body {
    margin: 0;
    padding: 0;
}
div {
    margin: 216px 0 0;
    width: 200px;
    overflow: hidden;
}
ol {
    color: #eeeded;
    padding: 0;
    margin: 0 0 0 42px;
}
li {
    padding: 10px 0 0;
    margin: 0;
    font: italic bold 35px/35px arial, helvetica, verdana, geneva, sans-serif;
}
html > /**/ body 
li {
    letter-spacing: -3px;
}
span {
    letter-spacing: normal;
    padding: 1px 0 0;
    color: #444444;
    font: 11px/1.7em arial, helvetica, verdana, geneva, sans-serif;
    vertical-align: text-top;
    display: inline-block;
}
        </style>
    </head>
    <body>
        <div>
            <ol>
                <li>
                    <span>content</span>
                </li>
                <li>
                    <span>more content</span>
                </li>
                <li>
                    <span>some big content to test this better!</span>
                </li>
                <li>
                    <span>super extra max big content to test this better, and better and better, and some more!</span>
                </li>
            </ol>
        </div>
    </body>
</html>

回答by calua

I had a similar issue but couldn't change the HTML, so here's a different idea: remove the list-styleand set up a css counter.

我有一个类似的问题，但无法更改 HTML，所以这里有一个不同的想法：删除list-style并设置一个css counter。

My code:

我的代码：

<ol>
    <li>something</li>
    <li>Something else</li>
</ol>

and (SCSS):

和（SCSS）：

ol {
    list-style: none;
    counter-reset: contador-lista;
    li {
            counter-increment: contador-lista;
            &:before {
                    //place your different styling here!
                    content: counter(contador-lista) ".";
            }
    }
}

回答by greg0ire

You can use position:relative on the li and the top property to achieve this. Example:

您可以在 li 和 top 属性上使用 position:relative 来实现这一点。例子：

ol li p
{
    position:relative;
    top : 20px;
}

回答by Zuul

This is a working example for what you want:

这是您想要的工作示例：

EDITED: p tag aligned at top of OL numbers

编辑：p 标签对齐在 OL 数字的顶部

<!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>MY SITE</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <style type="text/css">
        html, body {padding:0;margin:0;background-color:#CCCCCC;height:100%;}
        ol {
            padding-top:200px;
        }
        ol li {
            color: #EEEDED;
            font:bold 35px/35px Arial,Verdana,Geneva,Helvetica,sans-serif;
            font-style:italic;
            padding-top:10px;
            position:relative;
        }
        ol li p {
            position:absolute;
            top:0px;
            font-size:11px;
            color:#444444;
            font-weight:normal;
            font-style:normal;
            line-height:1.7em;
        }
        div {
            width:200px;
        }
    </style>
    </head>
    <body>
        <div>
            <ol>
                <li>
                    <p>content</p>
                </li>
                <li>
                    <p>more content</p>
                </li>
                <li>
                    <p>some big content to test this better!</p>
                </li>
                <li>
                    <p>super extra max big content to test this better, and better and better, and some more!</p>
                </li>
            </ol>
        </div>
    </body>
</html>