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.2ベストアンサー
- 回答日時:
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はダメですね・・・IE7ですが。
ご協力ありがとうございます。
No.5
- 回答日時:
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
- 回答日時:
具体的に「文章」として、「こう成ってるのをこうしたい」と書き込めば良いのでは?
問題点の例と自分の望む表示の内容を此処に直接。
例)
(標準表示)(・がリストマーカと思って。)
・文字列
(自分のしたい表示)
・ 文字列
~・と文字列の間に半角スペースでインデント~
こんな感じで・・・
本当に「どう表示」したいのか不明。
No.3
- 回答日時:
>二行目以降の文章は相変わらずリストマーカーの真下からスタート
え??意味が判りません。
それってlist-style-positionをinsideにしてるからですよね?
ulの内側にlistのマークを表示させて折り返しの挙動はlist-style:outside;じゃないんでしょうか?
そもそも【希望する正しい状態】の書き方にしても
「~してしまってしまう問題がある」
「~されてしまう問題がある」ですし、
【現在の問題な状態】と同じで問題の報告のみで、どこにも希望する状態が書かれていません。
どうされたいんですか??
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
準・究極の選択
「年収1000万円で一生カレーライス」か 「年収180万円で毎日何でも食べ放題」 あなたはどちらを選びますか?
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
htmlのolやulなどlistにtitleやcaptionをつけられますか?
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
li 長さ指定
-
html <ul></ul>の並びで一行空...
-
liタグの中に<p>タグやら<dl>を...
-
なぜ?マウスオーバーで1pt位置...
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
<ul><li></li></ul>にするメリ...
-
HTMLタグ リストの入れ子とNet...
-
リンク紹介に使える要素は?
-
HTML5のfooterに見出しを付けて...
-
IE8でli:hoverが効かない
-
excel vba で ulタグのなかのse...
-
テーブルを使わない段組みで
-
ulタグやliタグの中でbrタグ...
-
アコーディオンメニューがかく...
-
箇条書きがずれて表示されてし...
-
アンカーにクラスを適用しての...
-
CSSでこんな感じにしたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
リストの数字のフォントサイズ...
-
<ul><li></li></ul>にするメリ...
-
ulタグやliタグの中でbrタグ...
-
レスポンシブWebデザインでリン...
-
<ul>~</ul>が二つ続くと間に改...
-
HTML5のfooterに見出しを付けて...
-
htmlの<ol>タグで、数字などを...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
HTMLで組織図を作成する方法
-
複数行にまたがる括弧を表示し...
-
liタグの中に<p>タグやら<dl>を...
-
display:table;を多段表示させたい
-
divタグ内のコンテンツが重なっ...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
テーブル内のプルダウンの下に...
-
【至急】ul li 行間調整ができ...
おすすめ情報