リストマーカーをボックス内に収めて、かつ、<li>内の文章だけをリストマーカーよりもインデントする方法は？

質問

HTMLの<li>タグでリスト文章をつくるとき、list-style-positionでoutsideにしているボックスの外にリストマーカーが配置されてしまうので論外ですし、かと言ってinsideにしても<li>タグ内の文章の二行目以降がリストマーカーと同列に配置されてしまい、<li>内の文章よりも左側にリストマーカーがはみ出してくれないのでリストマーカーが<li>内の文章に埋没してしまって見にくくて困っており、回避策を探しております。

リストマーカーをボックス内に収めて、かつ、<li>内の文章だけをリストマーカーよりもインデントする方法はないのでしょうか？

【現在の問題な状態】

● list-style-positionをoutsideにした場合：リストマーカーがボックスモデルからはみ出してしま
ってしまう問題がある
● list-style-positionをinsideにした場合：リストマーカーがボックスモデル内には入って配置して
くれるのの、文章がインデントされてしまう問題がある

【希望する正しい状態】

● list-style-positionをoutsideにした場合：リストマーカーがボックスモデルからはみ出してしま
　　ってしまう問題がある
● list-style-positionをinsideにした場合：リストマーカーがボックスモデル内には入って配置して
　　くれるのの、文章がインデントされてしまう問題がある

宜しくお願いいたします。

回答No.5

神崎 渉瑠（@taloo）

list-style-positionのデフォルト値はブラウザ依存です。
（実際に、いくつかのブラウザのデフォルト値がinsideです）
W3Cでもデフォルト値は「参考値」としていくつかあげていますが、この中にもリストアップされていません。
http://www.w3.org/TR/CSS21/sample.html

また、outsideはulの外に出すという意味ではなく、liのブロックの外に出すという意味ですので、

<li>あいうえお<br>
かきくけこ</li>

この記述を

・あいうえお
　かきくけこ

となるのがoutside

・あいうえお
かきくけこ

となるのがinsideです。
（全角スペースで調整、等幅フォントで見て下さい）

ですから、
li{
　list-style-position: outside;
　margin-left: 2em /* 数値は任意 */
}
でいいと思います。（No.1と同じです）
必要なら、ul{padding-left:2em}などにしてもいいと思います。

これもNo.4、No.5と同じになりますが、

> 【現在の問題な状態】

> 【希望する正しい状態】

何が言いたいのかわかりません。
補足をお願いします。

お礼

詳細にありがとうございますm(_ _)m

> list-style-positionのデフォルト値はブラウザ依存です。
> （実際に、いくつかのブラウザのデフォルト値がinsideです）

はい、仰るとおりだと思います。規定値はブラウザに依存しています。
あくまでもW3Cの勧告を取り入れるかどうかはブラウザ次第ですから。

> また、outsideはulの外に出すという意味ではなく、liのブロックの外に出すという意味ですので

はい、その通りです。私はulの外に出ると書いていませんので間違いにあたりませんが書かれていることはその通りだと思います。

リストマーカーが出ないのでどこかの記述が影響しているのだと調査し続けます。
ありがとうございました。

回答No.4

noname#100277

具体的に「文章」として、「こう成ってるのをこうしたい」と書き込めば良いのでは？
問題点の例と自分の望む表示の内容を此処に直接。
例）
（標準表示）（・がリストマーカと思って。）
・文字列
（自分のしたい表示）
・ 文字列
～・と文字列の間に半角スペースでインデント～

こんな感じで・・・
本当に「どう表示」したいのか不明。

回答No.3

salonpath

>二行目以降の文章は相変わらずリストマーカーの真下からスタート

え？？意味が判りません。
それってlist-style-positionをinsideにしてるからですよね？
ulの内側にlistのマークを表示させて折り返しの挙動はlist-style:outside;じゃないんでしょうか？

そもそも【希望する正しい状態】の書き方にしても
「～してしまってしまう問題がある」
「～されてしまう問題がある」ですし、
【現在の問題な状態】と同じで問題の報告のみで、どこにも希望する状態が書かれていません。
どうされたいんですか？？

回答No.2

myun0922

UA毎にマーカーの表示位置や大きさ・続くテキストとの余白が異なるので、list-style-typeを使う場合はどうしても、完全に見栄えが同じにはなりません。
list-style-typeでマーカーを表示する場合は、ケースバイケースで微調整する事もありますが通常だいたいこんな感じで間に合ってます。

ul.hoge {
margin: 0;
padding: 0;
}
ul.hoge li {
margin-left: 1.5em;
padding: 0;
}
※list-style-positionの初期値はoutsideなので省略してあります。

つまりNo.1様の仰っている事と同じかと。
list-style-positionをoutsideとし→親要素ulのmarginとpaddingをリセットし→子要素liのmargin-leftで調整する。

手元の環境では上記で支障なく表示されてるんですが。

お礼

優れた方とお見受けいたします。正しい把握かつ詳しく書いていただき誠にありがとうございますm(_ _)m

しかし何故でしょうか、ダメなんです。insideですとリストマーカーが出るのですが、outsideではリストマーカーが出なくなるんです。
そういえばFirefoxではリストマーカーも出て二行目以降もちゃんとインデントされていますが・・・IEはダメですね・・・IE７ですが。

ご協力ありがとうございます。

回答No.1

salonpath

全称セレクタを使ってやたらめったらmarginやpaddingを0にしてませんか？

対象のliに、margin-left:2emあたりを追加してみてください。

お礼

投稿ありがとうございます。
しかしながらご案内の

> 対象のliに、margin-left:2emあたりを追加してみてください。

これは意味が無いです。
リストマーカーとそれに続く<li>内に入る文章との隙間が空くだけで、
二行目以降の文章は相変わらずリストマーカーの真下からスタートします。
つまり解決しないです。