ベストアンサー

<li>で改行する横並びのメニュー

2009/03/06 10:14

<ul><li>を使って横並びのメニューを作っています。項目が増えると横幅いっぱいになるためメニューが2行になるのですが、項目の途中で改行されて困っています。 │●リンクA　●リンクB　●リンクC　●リン│←ページ右端 │クD　●リンクE 項目の途中で改行せずに↓こうしたいと考えています。 │●リンクA　●リンクB　●リンクC　　　　│←ページ右端 │●リンクD　●リンクE リストタグを使わずに<br>で改行を入れる方法は使いたくありません。いい方法をご存知の方がいましたら教えてください。よろしくお願いします。

slowMay
お礼率68% (75/109)

HTML
回答数4
ありがとう数5

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

naokita
ベストアンサー率57% (1008/1745)

2009/03/06 20:51 回答No.4

難しく考えすぎ。単純に改行されたくなければ、幅固定が一般的だけど、文字数で幅がかなり違う場合には、ブロックにして li や a 内に限り改行禁止にする。 li{ display:block }　が一般的。あとは、アンカーの前後に文字が付属する場合なら li{ white-space: nowrap; } li a{ display:block;} こうやれば、 li や a を margin,paddingで調整。border で囲ったり background や color で色々出来る。また、この場合、ブラウザでフォントサイズのみを大きく変更された場合に、段落が増えるのでリンクメニューの順序も多少考慮し標準サイズで右側が短い文章の項目になるようにデザインも考慮しなければいけない。

質問者

お礼 2009/03/15 22:10

なるほど。参考になりました。ありがとうございました。

その他の回答 (3)

ORUKA1951
ベストアンサー率45% (5062/11036)

2009/03/06 11:26 回答No.3

ユーザーが、フォントを大きくしようが小さなディスプレイだろうが確実なのは、liにwidthを決めること。　IEを無視してよいなら、もっとスマートな解決方法があるのですがね。そうも行かないので・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>Untitled</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css">  </style> </head> <body> <h1>title</h1> <h2>subTitle</h2> <ul id="navi"> <li style="width:6.5em;">肩こりトップ</li> <li style="width:6.5em;">肩こりって？</li> <li style="width:10.5em;">女性に多い肩こり原因</li> <li style="width:9.5em;">一般的な肩こり原因</li> <li style="width:6.5em;">肩こり解消法</li> <li style="width:10.5em;">肩こりの治らない理由</li> <li style="width:15.5em;">肩こり解消・予防のための栄養素</li> <li style="width:6.5em;">肩こりと頭痛</li> <li style="width:15.5em;">ストレスからの肩こりと自律神経</li> </ul> </body> </html> 注)ul#navi li+li:before { content: "| " } の + と :befor、contentは、IEでは無視される。

質問者