CSSは、リストを命じた - Liが複数の行が含まれている場合、スタイル番号は、この質問のインデントを維持することが

Question

バリアントは尋ねたと答えたが、私は、この特定の質問に対する答えを見つけることができませんされています...

を私は考え各liがはインデントを維持しているように、複数行にまたがることが与え、私olに各li項目に番号のスタイルが好き。例えば

- ここでは、単純な、非スタイルの例である： - ：

複数行の適切なインデントに注意してください。これは、次の結果を生成

<div style="width: 200px;"> 
 
    <ol> 
 
    <li>blah blah blah blah blah blah blah blah blah blah</li> 
 
    <li>blah</li> 
 
    <li>blah blah blah blah blah blah blah blah blah blah</li> 
 
    <li>blah</li> 
 
    </ol> 
 
</div>

私はトリ

今

ol { 
 
    counter-reset: li; 
 
    list-style: none; 
 
} 
 
li { 
 
    counter-increment: li; 
 
} 
 
li:before { 
 
    margin-right: 10px; 
 
    content: counter(li) '.'; 
 
    width: 1.2em; 
 
    display: inline-block; 
 
}

<div style="width: 200px;"> 
 
    <ol> 
 
    <li>blah blah blah blah blah blah blah blah blah blah</li> 
 
    <li>blah</li> 
 
    <li>blah blah blah blah blah blah blah blah blah blah</li> 
 
    <li>blah</li> 
 
    </ol> 
 
</div>

、私は簡単に数字のスタイルを設定することができますが、複数行のインデントが失われた：

だから、どのようにli:beforeを使用して数字をスタイリング編数字を書式設定できますか？とは適切なインデントを維持できますか？

Answer 1

またtable値を使用するdisplay:を更新することができます。

table-row値は<tr>のような要素の行為を行い、table-cellは、リストの異なる部分が整列したままにすることを保証する<td>のような要素の行為を行います。

ol { 
 
    counter-reset: li; 
 
    list-style: none; 
 
} 
 
li { 
 
    counter-increment: li; 
 
    display:table-row; 
 
    
 
} 
 
li:before { 
 
    margin-right: 10px; 
 
    content: counter(li) '.'; 
 
    width: 1.2em; 
 
    display: table-cell; 
 
}

<div style="width: 200px;"> 
 
    <ol> 
 
    <li>blah blah blah blah blah blah blah blah blah blah</li> 
 
    <li>blah</li> 
 
    <li>blah blah blah blah blah blah blah blah blah blah</li> 
 
    <li>blah</li> 
 
    </ol> 
 
</div>

Answer 2

このCSSを使用してください。

li { 
    counter-increment: li; 
    padding-left: 30px; 
} 
li:before { 
    margin-right: 10px; 
    content: counter(li) '.'; 
    width: 1.2em; 
    display: inline-block; 
    margin-left: -30px; 
} 

Answer 3

あなたはそれをパディングによって要素の左側にあるいくつかのスペースを作ることができ、position: absoluteでコンテンツフローから:before要素を削除し、パディングにより作成された空間内の位置に。

ol { 
    counter-reset: li; 
    list-style: none; 
} 
li { 
    counter-increment: li; 
    /* Anchor all :before elements to their respective li */ 
    position: relative; 
    padding-left: 1em; 
} 
li:before { 
    content: counter(li) '.'; 
    width: 1.2em; 
    display: inline-block; 
    position:absolute; 
    left: 0; 
} 

Answer 4

別の要素を導入しても構わない場合は、スパン内のテキストをラップすることができます。

li { 
 
    color: red; 
 
} 
 
li span { 
 
    color: black; 
 
}

<div style="width: 200px;"> 
 
    <ol> 
 
    <li><span>blah blah blah blah blah blah blah blah blah blah</span></li> 
 
    <li><span>blah</span></li> 
 
    </ol> 
 
</div>