最初の単語を負のインデントにするCSSコード

私は紙のシートを表すhtmlコードをいくつか持っています。 h3タグには、章のタイトルがあります。チャプターには番号を付けることができます。番号はオプションで、クラス "番号"のスパンの内側にあります。すべての章のタイトルテキストがページの端から同じ距離に始まるようにしたい。パディング値3cmに設定されています。問題は、すべての数字を「パディングエリア」のタイトルの前にしたいということです。例は次のようになります。最初の単語を負のインデントにするCSSコード

 
    1.2 Title of chapter 

     some other text 

1.2.1 Some title of subsection 

     All other lines beside numbers start at the same distance 
     from the left side of page.

<body> 
 
<div style="padding:3cm"> 
 
<h3><span class="number">1.2 </span>Chapter title</h3> 
 
</div> 
 
</body>

Unfortunatyl私はhtmlコードを変更することはできません。私の考えは、チャプターテキストの前に番号を相対位置に置き、テキストの左側にスパンを右揃えにする魔法を使うことです。 CSSだけで可能ですか？

私はJavaScriptコードとテキストインデントを使用します：-xxx ch; h3に追加されます。問題は、xxxをh3タグごとに計算する必要があるということです。私はこのスニペットを見てみる、それははい、それはCSSによって行うことができる

出典

2016-09-12 chodnik

で行うことができます願っています：

h3 { 
 
    position: relative; 
 
} 
 
h3 > span.number { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: -3cm; 
 
    text-align: right; 
 
    width: 3cm; 
 
    padding-right: 5px; 
 
    box-sizing: border-box; 
 
}

<body> 
 
    <div style="padding:3cm"> 
 
    <h3><span class="number">1.2 </span>Chapter title</h3> 
 
    <h3><span class="number">1.2.4.5 </span>Chapter title</h3> 
 
    <h3><span class="number">1.3.1.2.4 </span>Chapter title</h3> 
 
    <h3><span class="number">1 </span>Chapter title</h3> 
 

 
    </div> 
 
</body>

出典

2016-09-12 07:42:56

.numberクラス

.number { 
    text-align: right; 
    width: 50px; 
    display: inline-block; 
    position: absolute; 
    left: 50px; 
}

ために、このスタイルを追加します

ここをクリックしてください。https://jsfiddle.net/6mpo5k2x/

出典

2016-09-12 07:45:48 ylerjen

答えをありがとう。私はポイントアップをクリックしたが、私は評判のポイントがなく、それは見えない。私は次の答えを受け入れました。なぜなら、h3は相対的な位置に置かれていて、あなたのコードと衝突するからです。 – chodnik

最初の単語を負のインデントにするCSSコード

答えて

関連する問題