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; }
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>
.linkFilePdf { display:inline-block; /display:inline; /*IE7*/ /zoom:1; /*IE7*/ background: url(/images/icon_pdf.png) no-repeat left 0.4em; padding-left: 1em; }
*「/display:inline;」と「/zoom:1; 」はIE7対応用です。
(「inline-block」はIE7以下未対応なので)
*backgroundの位置指定(left 0.4em)は相対単位の方が良いです。
(pxなど絶対単位だと、ユーザ側の文字サイズ変更で文字位置と画像位置が合わなくなるので。)
一応デモもアップしました。