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

解決済

質問者：slowMay
質問日時：2009/03/06 10:14
回答数：4件

<ul><li>を使って横並びのメニューを作っています。項目が増えると横幅いっぱいになるためメニューが2行になるのですが、項目の途中で改行されて困っています。

│●リンクA　●リンクB　●リンクC　●リン│←ページ右端
│クD　●リンクE

項目の途中で改行せずに↓こうしたいと考えています。

│●リンクA　●リンクB　●リンクC　　　　│←ページ右端
│●リンクD　●リンクE

リストタグを使わずに<br>で改行を入れる方法は使いたくありません。いい方法をご存知の方がいましたら教えてください。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： naokita
回答日時：2009/03/06 20:51

難しく考えすぎ。

単純に改行されたくなければ、幅固定が一般的だけど、文字数で幅がかなり違う場合には、ブロックにして li や a 内に限り改行禁止にする。

li{ display:block }　が一般的。

あとは、アンカーの前後に文字が付属する場合なら
li{ white-space: nowrap; } li a{ display:block;}

こうやれば、
li や a を margin,paddingで調整。border で囲ったり background や color で色々出来る。
また、この場合、
ブラウザでフォントサイズのみを大きく変更された場合に、段落が増えるのでリンクメニューの順序も多少考慮し標準サイズで右側が短い文章の項目になるようにデザインも考慮しなければいけない。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2009/03/15 22:10

No.3

回答者： ORUKA1951
回答日時：2009/03/06 11:26

ユーザーが、フォントを大きくしようが小さなディスプレイだろうが確実なのは、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では無視される。