CSSでの<ul><li>を使った改行設定

質問

<ul><li>を使用して文章入れても、その文章が長いと改行した時に
文字の始まりから、表示できません。（<li>の背景に矢印等の見出しマークを使用）
見出しマーク＋スペース＋文字の始まり・・・で改行されても、2行めの始まりが1行目の始まりに合わせて設定する方法をご存じないでしょうか？
よろしくお願いします。

回答No.1

steel_gray · ベストアンサー

ちょっと、目指している仕上がりがよくわからなかったんですが
text-indent(とpadding)で調整してみては

<style type="text/css">
ul{
list-style-type:none;
border:solid 1px black;
width:8em;
}
li{
border:solid 1px red;
padding-left:1em;
}
li.type2 {text-indent:1em;}
li.type3 {text-indent:-1em;}
</style>

<ul>
<li class="type1">未調整のリスト、一行目と２行目以降が揃います。</li>
<li class="type2">１行目だけ一桁後ろから始まるように調整した例。</li>
<li class="type3">２行目以降を一桁後ろから始まるように調整した例。</li>
</ul>

回答No.3

abril

> <li>の背景に矢印等の見出しマークを使用

ここで仰っている「背景」とは、<li>のスタイルとしてbackgroundプロパティで画像を使用されている、ということですよね？<ul>にlist-style-imageプロパティを指定するのではなく。
※まあ後者であればlist-style-positionの初期値がoutsideなのでこういう状態にはならないと思いますが。
であれば、ANo.1の回答者様が説明されている通りです。リストマークに使用する背景画像のwidthの値（マークとテキストの間にスペースを入れたければそれ＋αの値で）"XXpx"をpadding-leftに、text-indentには"-XXpx"を設定してやれば問題なくご希望の様なスタイルになる筈です。もしそれでもうまくいかないのであれば、親要素からの継承関係も見直してみて下さい。

回答No.2

goldfox

liの中身をpなどで囲ってmargin-leftで調整すればよいかと。