html - 当我们在 中有多个元素时，如何将 中的元素与 的编号对齐

Question

我需要像这样

用这个标记

<ol>
    <li>
        <h2>Lorem ipsum dolor sit amet</h2> 
        <h3>consectetuer adipiscing elit</h3></li>
   <li>
        <h2>Lorem ipsum dolor sit amet</h2>
        <h3>consectetuer adipiscing elit</h3>
  </li>
   <li>
        <h2>Lorem ipsum dolor sit amet</h2>
        <h3>consectetuer adipiscing elit</h3>
  </li>
</ol>

但我无法使 H2、h3 与 Digit 内联

在这里查看 Jsfiddle http://jsfiddle.net/jitendravyas/ZaV3b/3/

问题

我的标签选择是否正确，或者有什么更好的方法吗？

如何获得理想的定位？

你可以试试我的 jS fiddle 例子

Answer 1

我想你正在寻找这个:

li {font-size:70px;padding-top:40px;}
h2 {font-size:30px;margin-top:-30px; position: absolute}
h3 {font-size:20px;margin-top:0;}

给 h2 一个 absolute 位置，带有负 margin-top。

参见 The Demo .