3

CSS でハンギング セクション番号を作成するにはどうすればよいですか? 言い換えると、

  • 見出しテキストは、テキストと同じ水平位置で左揃えにする必要がありますが、
  • セクション番号 セクション番号は、左側の列に「ぶら下がっている」必要があります。

おそらくこれを説明する最も良い例は、番号付きリストのブラウザのレンダリングです:

  1. 見出し 1

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labe 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 labe 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, h2, h3 {
  text-align: left;
  margin-left: -10px;
}
于 2009-08-04T20:10:55.553 に答える
0

h1 { margin-left: -10px; }ヘッダーが2行になるまで機能します。

これはどう：

h1 { text-indent: -10px }

于 2009-08-21T08:21:36.193 に答える