リスト項目番号を周囲の段落に合わせる

Question

リスト項目には段落や画像などが含まれている場合があります。

#page { 
 
    width: 200px; 
 
} 
 

 
li { 
 
    margin: 1em 0; 
 
} 
 
ol { 
 
    padding: 0; 
 
}

<div id="page"> 
 
    <p>Some text</p> 
 
    <ol> 
 
    <li>A list item</li> 
 
    <li>A multiline list item another line</li> 
 
    <li> 
 
     <p>A list item containing blocks such as example images:</p> 
 
     <div style="width:128px;height:48px;background:#CCC">Example<br/>Image</div> 
 
    </li> 
 
    </ol> 
 
    <p>Some more text</p> 
 
</div>

は、理想的には私は、リストタグを保つのではなく、テーブルや配置の一般的なブロックの他のセットを使用することを好むだろう。

Answer 1

あなただけol要素にいくつかの左パディングを追加することができます。

#page { 
 
    width: 200px; 
 
} 
 
ol { 
 
    padding: 0 0 0 1em; 
 
} 
 
ol li { 
 
    margin: 1em 0; 
 
}

<div id="page"> 
 
    <p>Some text</p> 
 
    <ol> 
 
    <li>A list item</li> 
 
    <li>A multiline list item another line</li> 
 
    </ol> 
 
    <p>Some more text</p> 
 
</div>

また、CSSカウンタを使用すると擬似要素を介してリスト番号を追加することができます。

#page { 
 
    width: 200px; 
 
} 
 
ol { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
ol li { 
 
    margin: 1em 0; 
 
    counter-increment: number; 
 
    display: flex; 
 
} 
 
ol li:before { 
 
    content: counter(number)"."; 
 
    margin-right: 5px; 
 
}

<div id="page"> 
 
    <p>Some text</p> 
 
    <ol> 
 
    <li>A list item</li> 
 
    <li>A multiline list item another line</li> 
 
    </ol> 
 
    <p>Some more text</p> 
 
</div>

Answer 2

チェックアウトlist-style-positionproperty

#page { 
 
    width: 200px; 
 
} 
 
li { 
 
    margin: 1em 0; 
 
    /* this is what you want ↓ */ 
 
    list-style-position: inside; 
 
} 
 
ol { 
 
    padding: 0; 
 
}

<div id="page"> 
 
    <p>Some text</p> 
 
    <ol> 
 
    <li>A list item</li> 
 
    <li>A multiline list item another line</li> 
 
    </ol> 
 
    <p>Some more text</p> 
 
</div>