プロが教える店舗&オフィスのセキュリティ対策術

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

A 回答 (3件)

ちょっと、目指している仕上がりがよくわからなかったんですが


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">未調整のリスト、一行目と2行目以降が揃います。</li>
<li class="type2">1行目だけ一桁後ろから始まるように調整した例。</li>
<li class="type3">2行目以降を一桁後ろから始まるように調整した例。</li>
</ul>
    • good
    • 0

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



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

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

    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!