![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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>
<!-- /wrapper --></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;
}
No.4ベストアンサー
- 回答日時:
<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 … )
No.3
- 回答日時:
失礼
(pddding → padding)
html,body,h1,h2,h3,ul,ol,li,dl,dt,dd{ margin:0; padding:0;}
No.2
- 回答日時:
貴方が見えてない部分が未計算だからです。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
指定の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などによって、
合計値を把握して設定しないと段落ちしますよ・・・
No.1
- 回答日時:
「改行」じゃなくて「折り返し」ね。
まったく別のもなので混同しないようにしましょう。
で、答え。
(190+2+5)*5+●●>985
●●って何か分かります?<ul>のデフォルトパディングです。ちなみに私の手もとのIE10では40でした。
<li>はほとんどのブラウザでインデントがかかるでしょう?あれです。
各タグのデフォルト表示はきちんと把握しましょう。
というかFirefoxにもChromeにも(IEは最近)デバッグ用の表示をしてくれる機能があるんだからちゃんと使いましょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<ul>~</ul>が二つ続くと間に改...
-
htmlについて質問です! 写真の...
-
添付画像のようなツリーリスト...
-
html <ul></ul>の並びで一行空...
-
レスポンシブWebデザインでリン...
-
番号付きリスト(<Ol><Li>・・...
-
css ol liにdisplay:inlineを設...
-
リストの数字のフォントサイズ...
-
画像にリンクを張ると画像がず...
-
<ul><li></li></ul>にするメリ...
-
フレーム内のtarget指定を全て...
-
ulとliで囲った文字の一部を変...
-
HTMLで画像を3つ並べる方法
-
ulタグやliタグの中でbrタグ...
-
HTMLで組織図を作成する方法
-
画像上にリンクとインラインフ...
-
html/cssの、navを2段にする...
-
<li>で並べたメニューのリンク...
-
CSS 横並びリストの書き方はど...
-
リストを2つに分割して、それぞ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
HTML ul li で横並びにナビゲー...
-
ulタグやliタグの中でbrタグ...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
HTMLで組織図を作成する方法
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
HTML5のfooterに見出しを付けて...
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
-
ボタンを横に並べて表示させる方法
-
html <ul></ul>の並びで一行空...
-
画像にリンクを張ると画像がず...
-
アコーディオンメニューがかく...
-
ulとliで囲った文字の一部を変...
-
レスポンシブWebデザインでリン...
-
htmlの<ol>タグで、数字などを...
おすすめ情報