html - 当我们在 <ol> 中有多个元素时,如何将 <ol> 中的元素与 <oil> 的编号对齐

标签 html css semantic-markup

我需要像这样

enter image description here

用这个标记

<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 例子

最佳答案

我想你正在寻找这个:

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 .

关于html - 当我们在 <ol> 中有多个元素时,如何将 <ol> 中的元素与 <oil> 的编号对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6994813/

相关文章:

testing - Web辅助功能测试工具

html - 对于小部件的侧边栏,哪个更语义化?

javascript - 将 NPM 项目转换为浏览器兼容的 JavaScript 文件?

html - 如何设置 Facebook 分享按钮的样式

html - 让div占据剩余宽度的100%?

css - 如何将不同 css 规则中的不同颜色应用于同一个对象?

html - 文章列表的语义 HTML

javascript - 如何突出显示CSS中的当前点击菜单项?

php - 多个 HTML 页面和分页

javascript - 如何打印与显示完全相同的 Bootstrap 模态?