- ベストアンサー
cssでの自動改行
cssでの自動改行 長文が自動改行されると行の先頭部分にあるリストマークの下に改行分部が先頭になってしまいます。 文の始めと改行された先頭の文字を並べたいのですが方法が見つかりませんでした。 cssは下記載で記入しておりますが、どなたか良い方法をお知らせ下さると助かります。 画像添付しております。 #sidebar p { font-size:12px; line-height:15px; padding-left:5px; margin-bottom:0;
- batwith
- お礼率83% (5/6)
- その他（プログラミング・開発）
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No1です。 text-indent:を指定しているのですから、1行目とそれ以降の行頭がそろわない（インデントされる）のは意図的に行なっているとしか思えませんが？ 察するところ、マーカーを背景にしたので、重なるのを避けようとして1行目をインデントしたのでしょうか？ でも、ご提示の指定だと項目内の行数が増えるとやはりマーカーと文章が重なる可能性があると思いますけれど？ そのままの方法でやるのなら、No2様がご指摘のようにpadding-leftで全体の表示範囲を下げて、インデントは行なわないのが簡単。 あるいはNo1で示したように、list-styleでマーカーを指定するとか。通常はlist-style-position: outside;がデフォルトなので文字とマーカーは重ならないはず。 まったく違う方法として #sidebar li:before { position:relative; left:-3em; content:url(marker.gif); } みたいなのもないことはないでしょうけれど、画像分のインデントが残ってしまうのでわざわざtext-indent:-15pxみたいな指定をしなくてはならないので適切ではないと思われます。
その他の回答 (2)
- nekomikekamo
- ベストアンサー率73% (71/97)
#sidebar liの text-indent:15px;をpadding-left:15px;に変更？
お礼
ありがとうございます。 調整してみます。
- fujillin
- ベストアンサー率61% (1594/2576)
普通にリストでマークアップしていないのでは？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> ul.list { width:25em; list-style-image:url(marker.gif); } </style> </head> <body> <ul class="list"> <li>平成２２年度定例料理研究会にお申し込みの皆様に長く長いタイトルの場合は改行するけれど、頭を揃えたいのだ</li> <li>平成２２年度定例料理研究会にお申し込みの皆様に長く長いタイトルの場合は改行するけれど、頭を揃えたいのだ</li> </ul> </body> </html>
補足
すいません情報が少なすぎました。 ホームペー担当者、引継ぎ後の修正でして、下記載がサイドバーソースです。 どうしても、文章の頭部がそろわず、リストマークの位置ずれが起こってしまいます。 少々初心者に近いものですから、具体的にご教授願えたら幸いです。 宜しくお願いします。 ボックス内、一行以内の文字はリストマークと文字の関係が良いのですが、 ２行目になると２行目以降は画像のようになるんです。 宜しくお願いします。 ※css #sidebar { width:240px; float:right; margin-right:5px; margin-bottom:25px; } #sidebar ul { padding-left:5px; list-style:none; margin:0; } #sidebar li { background:url(images/sidebar.png) left no-repeat; text-indent:15px; margin:5px 0; }
お礼
ありがとうございます。 大変勉強になります。 参考にさせて頂きます。