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.1
- 回答日時:
「改行」じゃなくて「折り返し」ね。
まったく別のもなので混同しないようにしましょう。
で、答え。
(190+2+5)*5+●●>985
●●って何か分かります?<ul>のデフォルトパディングです。ちなみに私の手もとのIE10では40でした。
<li>はほとんどのブラウザでインデントがかかるでしょう?あれです。
各タグのデフォルト表示はきちんと把握しましょう。
というかFirefoxにもChromeにも(IEは最近)デバッグ用の表示をしてくれる機能があるんだからちゃんと使いましょう。
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.3
- 回答日時:
失礼
(pddding → padding)
html,body,h1,h2,h3,ul,ol,li,dl,dt,dd{ margin:0; padding:0;}
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 … )
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ulとliで囲った文字の一部を変...
-
excel vba で ulタグのなかのse...
-
<table>の高さ固定。情報増加時...
-
<ul><li></li></ul>にするメリ...
-
li タグ全体をリンクに。
-
リストを2つに分割して、それぞ...
-
HTMLで組織図を作成する方法
-
display:table;を多段表示させたい
-
ドロップダウンメニューが隠れ...
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
bxsliderの画像が左によってしまう
-
liタグの左寄せ方法を教えてく...
-
htmlの<ol>タグで、数字などを...
-
文法チェックの<A>と</A>の間が...
-
真横に展開するドロップダウン...
-
ulタグやliタグの中でbrタグ...
-
HTML5のfooterに見出しを付けて...
-
「CSS」リストの2段組どのよう...
-
ul li を inlineにすると、右か...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
ページを開いているときのリン...
-
html <ul></ul>の並びで一行空...
-
html/cssの、navを2段にする...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報