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

Question

ul　li　を使用して、横並びのメニューを作成したいのですが、最後の項目が、横に並びきれなくて、下の段に移ってしまいます。 border幅や、marginも計算してpxで指定しているつもりですが、上手くいきません(TдT) 何故ですかね？ HTML

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; }

ORUKA1951 · Accepted Answer

要素を使われていることから、HTML5だと思います。その場合は、になります。これで、ほとんどのブラウザは標準モードで動作しますので、ブラウザによるレンダリングの差はなくなるはずです。 ★HTML5では、原則として

要素は使いません。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 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/grouping-content.html#the-div-element )］より　著者は、他に適切な要素がないときなど、最後の最後の手段としてDIV要素を使うよう強く推奨する。DIV要素でなく適切な要素を使うことによって、読者にとってはアクセシビリティ向上に、著者にとってメンテナンス性の向上につながります。　HTML4.01(1999年)でもすでに「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」と書かれていたのですから、

も好ましくはありません。　この場合、

でしょう。なくても良いはずです。　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 　標準モードでは、サイズはpadding辺の内側です。　⇒8.1 ボックスの寸法（Box dimensions）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#box-dimensions ) 　リストは、各項目を字下げしてレンダリングするブラウザが多いのですが、それにpaddingを使用するかmarginを使用するかはブラウザによって異なります。　この場合 nav ul,nav ul li{ list-style-type:none; margin:0;padding:0; } とそれらを消してから、改めて指定すると確実です。最近のように、スマホやタブレット、幅広ディスプレイと様々な端末が想定される場合、固定ではなくリキッドでデザインするほうが良いですし、楽です。　

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/HTML/nav/navigation1.html )

naokita · Answer

失礼
(pddding →　padding)

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

naokita · Answer

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

指定の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などによって、
合計値を把握して設定しないと段落ちしますよ・・・

play_with_you · Answer

「改行」じゃなくて「折り返し」ね。まったく別のもなので混同しないようにしましょう。で、答え。 (190+2+5)*5+●●＞985 ●●って何か分かります？

はほとんどのブラウザでインデントがかかるでしょう？あれです。各タグのデフォルト表示はきちんと把握しましょう。というかFirefoxにもChromeにも（IEは最近）デバッグ用の表示をしてくれる機能があるんだからちゃんと使いましょう。

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

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

失礼

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

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

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング