cssでリストマークや画像アイコンをつけた時に、2行目以降にもインデントを入れる

liに「list-style」を設定していれば2行目以降も自動でインデントはとられますが、

任意の文字を入れたり、画像アイコンにしたりで「list-style: none;」にする(もしくはpなどli以外のマークアップ)と

2行目以降が↓こんな風になってしまいます。

↓こちらみたいにインデントを2行目以降にも入れるには、

html

<ul>
<li>1)テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>2)テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
</ul>

css(1.5文字分インデントをとる)

li{
margin-left: 1.5em;
text-indent: -1.5em;
}

*text-indentをマイナス設定にして1行目を1.5文字分左に出して(2行目にインデントがつく)、マージンで位置を調整します。

pやdlなどli以外のマークアップの場合

同じ設定でOKです。

↑これを↓こちらのように2行目もインデントを付ける。

html

<p>★テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

css(1文字分インデントをとる)

p{
margin-left: 1.0em;
text-indent: -1.0em;
}

aなどブロック要素以外にインデントを付ける

liやpなどブロック要素に指定する場合は上記で大丈夫ですが、
aなどは「inline-block」にする必要があります。

↓こんな感じでaに「別ウインドで開く」などのアイコンを付ける場合は

html

<p><a href="#" class="linkFilePdf">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a><br>
<span class="fileSize">[PDF]500KB</span></p>

cssIE7以上対応)

.linkFilePdf {
display:inline-block;
/display:inline; /*IE7*/
/zoom:1; /*IE7*/
background: url(/images/icon_pdf.png) no-repeat left 0.4em;
padding-left: 1em;
}

*アイコンはaの背景画像として設定しています。
*「/display:inline;」と「/zoom:1; 」はIE7対応用です。
(「inline-block」はIE7以下未対応なので)
backgroundの位置指定(left 0.4em)は相対単位の方が良いです。
(pxなど絶対単位だと、ユーザ側の文字サイズ変更で文字位置と画像位置が合わなくなるので。)

一応デモもアップしました。



【関連記事】
▼上付き文字(sup)、下付き文字(sub)をcssで整える
http://d.hatena.ne.jp/soratomo0714/20150816