HTML/CSS：将部分编号挂在左对齐标题文本的左侧
Posted
技术标签:
【中文标题】HTML/CSS：将部分编号挂在左对齐标题文本的左侧【英文标题】：HTML/CSS: Hanging section numbers to the left of left-aligned heading text 【发布时间】：2010-11-16 19:25:46 【问题描述】：如何使用 CSS 创建悬挂部分编号？换句话说，
标题文本应在与文本相同的水平位置左对齐，但 节号节号应“挂”在左栏中。或许最好的例子就是浏览器对编号列表的渲染：
标题 1
Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。
标题 2
Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。
在 CSS 中是否有任何理智的方法可以在标题标签之前使用数字来执行此操作（适用于所有级别）？
要修改的简单示例 html：
<html>
<body>
<h1>First h1 heading</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<h2>First h2 heading</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</body>
</html>
【问题讨论】：
你有我们可以使用的演示代码吗？ 给你：gist.github.com/161520 【参考方案1】：试试这个：
h1, h2, h3
text-align: left;
margin-left: -10px;
【讨论】：
【参考方案2】：我已经完成了。本质上，每个计数器都必须向左浮动：
h1:before
content: counter(chapter) ". ";
float:left;
width: 1.2cm;
每个标题都必须有一个边距和一个left 属性：
h1
left: 1.2cm;
margin-left: -1.2cm;
【讨论】：
【参考方案3】：h1 margin-left: -10px; 将一直有效，直到您的标题变为两行。
这个怎么样：
h1 text-indent: -10px
【讨论】：
以上是关于HTML/CSS：将部分编号挂在左对齐标题文本的左侧的主要内容，如果未能解决你的问题，请参考以下文章