3

如何使用 CSS 创建悬挂部分编号？换句话说，

  • 标题文本应在与文本相同的水平位置左对齐，但
  • 节号 节号应“挂”在左栏中。

说明这一点的最佳示例可能是浏览器对编号列表的呈现：

  1. 标题 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. 标题 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>
4

3 回答 3

3

我已经完成了。本质上，每个计数器都必须向左浮动：

h1:before {
    content: counter(chapter) ". ";
    float:left;
    width: 1.2cm;
}

每个标题都必须有一个边距和一个left属性：

h1 {    
    left: 1.2cm;
    margin-left: -1.2cm;
}
于 2009-08-04T20:39:16.133 回答
0

h1 { margin-left: -10px; }将工作，直到您的标题变为两行。

这个怎么样：

h1 { text-indent: -10px }

于 2009-08-21T08:21:36.193 回答
0

尝试这个：

h1, h2, h3 {
  text-align: left;
  margin-left: -10px;
}
于 2009-08-04T20:10:55.553 回答