HTML/CSSでタブストップを行うには

Question

HTMLで書式を設定したいテキストがあります。

注箇条書きと段落番号の灰色の線：ここでの画像です。箇条書きはページの中央に配置し、数字は正当なものにする必要があります。

私はこれをHTMLで行う方法を考えようとしていて、空白になっています。どのようにこの書式をキャプチャしますか？

Answer 1

残りの内容（箇条書きの点）を右にして中心にします。残りの内容に、数値が幅より大きい等しい左右の余白を与えると、内容は中央に配置されます。

Answer 2

私は考えることができるいくつかの方法があります。

• フロート+絶対位置（私は純粋主義者はこの1つを説明してもらおう）
• オールドスタイルテーブルは、それが最も簡単ですので、（私はこれを説明します）：

面積の合計幅が300ピクセル

<table><tr> 
    <td width="30"></td> 
    <td width="240" align="center">bullets</td> 
    <td width="30" align="right">number</td> 
</tr></table> 

多く、たとえば、ある場合には人々は、純粋なCSSを使用して好むが、私は私のテーブルが好き、彼らはちょうど私のため

Answer 3

を働くあなたがここに大きな効果を:beforeと:after擬似要素を使用することができます。

http://jsfiddle.net/yNnv4/1/

これは、すべてで動作します最新のブラウザとIE8 +。 IE7のサポートが必要な場合は、この答えはあなたのためではありません:)

counterプロパティについて

#container { 
    counter-reset: nums; 
} 
p { 
    position: relative; 
    margin: 21px 0; 
} 
p:before { 
    content: '\2022 \2022'; 
    font-size: 2em; 
    position: absolute; 
    top: -8px; 
    left: 0; 
    line-height: 1px; 
    color: #888; 
    width: 100%; 
    text-align: center 
} 
p:after { 
    content: counter(nums); 
    counter-increment: nums; 
    font-size: 1.5em; 
    position: absolute; 
    top: -8px; 
    right: 0; 
    line-height: 1px; 
    color: #888; 
    font-family: sans-serif 
} 

：

• https://developer.mozilla.org/en/CSS_Counters
• http://www.w3.org/TR/CSS21/syndata.html#counter
• http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

---

弾丸を（自動的に）増分することはできません。

しかし、それはいくつかの怪しげな繰り返しを行うことができます。

http://jsfiddle.net/N4txk/1/

p:before { content: '\2022' } 
p+p:before { content: '\2022 \2022' } 
p+p+p:before { content: '\2022 \2022 \2022' } 
/* .... */ 

（あるいは、:nth-childは同じように繰り返すことができます：http://jsfiddle.net/N4txk/ - それはIE8で動作しません。 ; 2つの弾丸しかない）

弾丸の数には上限がありますsensibleは持っているので、必要に応じて何度もコピー＆ペーストしても問題ありません。

Answer 4

どうやってこのようなことができますか？

http://jsfiddle.net/6eTCf/

<div class="separator"> 
    * <div class="page_number">1</div> 
</div> 


.separator{ 
    margin: 5px 0 5px 0; 
    color:gray; 
    position:relative; 
    text-align: center; 
} 

.page_number{ 
    position:absolute; 
    right: 3px; 
    top: 0; 
} 

Answer 5

私はそのような右側の番号を取得するには、ラッパーと段落番号のdivの間の相対/絶対位置を使用し、その後、divの中で全体を包むでしょう。

ここには、方法を示すfiddleがあります。

Answer 6

私は考えることができるいくつかの方法があります。

段落の間に<div>を追加し、次に2つの<p>：<p class="dot"></p>と<p class="pnum">1</p>を追加します。

スタイルは、段落の幅、およびCSSで次のように設定する<div>：

.dot{ text-align: center; } 
.pnum{ float: right; }