ul li を使用して、横並びのメニューを作成したいのですが、最後の項目が、横に並びきれなくて、下の段に移ってしまいます。 border幅や、marginも計算してpxで指定しているつもりですが、上手くいきません(TдT) 何故ですかね？ HTML about information party access contact CSS #wrapper { width: 985px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } nav ul { list-style-type:none; } nav li { float:left; width:190px; border: 1px #ffb366 solid; text-align:center; margin-right:5px; }

「改行」じゃなくて「折り返し」ね。まったく別のもなので混同しないようにしましょう。で、答え。 (190+2+5)*5+●●＞985 ●●って何か分かります？のデフォルトパディングです。ちなみに私の手もとのIE10では40でした。はほとんどのブラウザでインデントがかかるでしょう？あれです。各タグのデフォルト表示はきちんと把握しましょう。というかFirefoxにもChromeにも（IEは最近）デバッグ用の表示をしてくれる機能があるんだからちゃんと使いましょう。

メニューの横並びで改行されてしまう。

解決済

質問者：kaori2012
質問日時：2013/07/30 12:29
回答数：4件

ul　li　を使用して、横並びのメニューを作成したいのですが、
最後の項目が、横に並びきれなくて、下の段に移ってしまいます。

border幅や、marginも計算してpxで指定しているつもりですが、上手くいきません(TдT)

何故ですかね？

HTML
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li><a href="#">about</a></li>
<li><a href="#">information</a></li>
<li><a href="#">party</a></li>
<li><a href="#">access</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>
</div>

CSS
#wrapper {
width: 985px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

nav ul {
list-style-type:none;
}
nav li {
float:left;
width:190px;
border: 1px #ffb366 solid;
text-align:center;
margin-right:5px;
}

通報する

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

質問の本文を隠す

回答 (4件)

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

No.4ベストアンサー

回答者： ORUKA1951
回答日時：2013/07/31 20:06

<nav>要素を使われていることから、HTML5だと思います。

その場合は、
<doctype html>
になります。これで、ほとんどのブラウザは標準モードで動作しますので、ブラウザによるレンダリングの差はなくなるはずです。
★HTML5では、原則として<div>要素は使いません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Note:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/grou … )］より
　著者は、他に適切な要素がないときなど、最後の最後の手段としてDIV要素を使うよう強く推奨する。DIV要素でなく適切な要素を使うことによって、読者にとってはアクセシビリティ向上に、著者にとってメンテナンス性の向上につながります。
　HTML4.01(1999年)でもすでに「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」と書かれていたのですから、<div id="wrapper">も好ましくはありません。
　この場合、<article>でしょう。なくても良いはずです。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　標準モードでは、サイズはpadding辺の内側です。
　⇒8.1 ボックスの寸法（Box dimensions）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
　リストは、各項目を字下げしてレンダリングするブラウザが多いのですが、それにpaddingを使用するかmarginを使用するかはブラウザによって異なります。
　この場合
nav ul,nav ul li{
list-style-type:none;
margin:0;padding:0;
}
とそれらを消してから、改めて指定すると確実です。

最近のように、スマホやタブレット、幅広ディスプレイと様々な端末が想定される場合、固定ではなくリキッドでデザインするほうが良いですし、楽です。

<body>
　<header>
　　<nav>
　　　<ul>
　　　　<li><a href="#">about</a></li>
　　　　<li><a href="#">information</a></li>
　　　　<li><a href="#">party</a></li>
　　　　<li><a href="#">access</a></li>
　　　　<li><a href="#">contact</a></li>
　　　</ul>
　　</nav>
　</header>

header,section,footer{
　width:980%;min-width:640px;max-width:980px;
　margin:0 auto;
}
header nav ul,header nav ul li{
　list-style:none;
　display:block;
　text-align:center;
　margin:0;padding:0;
　line-height:2em;
}
header nav ul{font-size:5px;}
header nav ul li{
　display:inline-block;
　width:18%;
　border: 1px #ffb366 solid;
　position:relative;
}
header nav ul li a{
　display:block;
　width:100%;height:100%;
　text-decoration:none;
}
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )

- 0
- 件

通報する

この回答へのお礼

ORUKA1951さん

御回答有難う御座います。

また、HTML5でのdivについてのご指摘もありがとうございます。

通報する

お礼日時：2013/08/06 13:18

No.3

回答者： naokita
回答日時：2013/07/30 21:47

失礼

(pddding →　padding)

html,body,h1,h2,h3,ul,ol,li,dl,dt,dd{ margin:0; padding:0;}

- 0
- 件

通報する

No.2

回答者： naokita
回答日時：2013/07/30 21:45

貴方が見えてない部分が未計算だからです。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

指定のCSSがなくてもHTMLだけで見やすくなるように、
ブラウザ側のデフォルト値でレンダリングしてくれていますので・・・

html,body,h1,h2,h3,ul,ol,li,dl,dt,dd{ margin:0; pddding:0;}
みたいなリセットして一旦「0」にしないと計算できないでしょ

また、
DTD 過去互換/標準　DOCTYPEスイッチによって、
border,padding
IE6のfloat向きのmarginなどによって、
合計値を把握して設定しないと段落ちしますよ・・・

- 0
- 件

通報する

この回答へのお礼

naokitaさん

ご回答ありがとうございました。
上手く出来ました。

通報する

お礼日時：2013/08/04 13:02

No.1

回答者： play_with_you
回答日時：2013/07/30 15:07

「改行」じゃなくて「折り返し」ね。

まったく別のもなので混同しないようにしましょう。

で、答え。

(190+2+5)*5+●●＞985
●●って何か分かります？<ul>のデフォルトパディングです。ちなみに私の手もとのIE10では40でした。
<li>はほとんどのブラウザでインデントがかかるでしょう？あれです。
各タグのデフォルト表示はきちんと把握しましょう。
というかFirefoxにもChromeにも（IEは最近）デバッグ用の表示をしてくれる機能があるんだからちゃんと使いましょう。