横並びのリストで左端がはみ出る

Question

リストを横並びにしてメニューバーを作ろうとしているのですが、CSSの参考書に書いてある通りにHTMLとCSSを書いても、添付ファイルのように、どうしても左端がはみ出てしまいます。（この例ではわかりやすいようにli要素の左にボーダーを入れています） index.html TITLE

nav.css .nav { display: table; width: 100%; table-layout: fixed; padding-top: 10px; padding-bottom: 10px; background-color: #dddddd; } .nav_item { display: table-cell; border-left: thick solid #000000; } .nav_item > a { display: block; list-style-type: none; text-decoration: none; text-align: center; } どのブラウザで確認しても同じ現象です。どうやったら正常に表示されるのか、おわかりになれば教えてください。

ORUKA1951 · Accepted Answer

＞という認識であってますでしょうか？
　プロパティには継承されるものと継承されないものがあります。
　borderやwidthは継承されません。
　line-heightやtext-align、font-familyなどは継承されます。
　　とは言っても常識的なものですね。
　　bodyに枠をつけたら子孫要素にすべてborderがつくわけない

他人に薦めている＝私自身が役立ったと思う仕様書は
HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )
　特に「5 セレクタ」「6 プロパティ値とカスケーディング、継承の割り当て」
HTML5,CSS3に比較してずっと簡単ですからね。
その後、HTML5なら、その上で
HTML 5 differences from HTML 4( http://www.html5.jp/trans/w3c_differences.html )
とか・・

ORUKA1951 · Answer

＞お察しの通り、初心者で入門書に載っている例を、１つずつ

～

に入れて試しているような段階です。　main要素はHTML5の勧告直前に追加された要素ですが非常に制約が多いです。文書の中で一箇所しか使えません。 ★ article, aside, footer, header, nav 要素の内部・子孫には存在してはならない。　端的に言うとそのページの主題となっている部分の目印として一箇所だけ用いる。 HTML5の典型的なマークアップ　

　　文書のヘッダ　　　

sectionは一つだけ見出し要素を持つ

見出し

　 mainを使う例　

　　文書のヘッダ　　　

sectionは一つだけ見出し要素を持つ

　＞参考サイトや仕様書をきちんと読んで、基礎の基礎から勉強しようと思います。　まず仕様書を通して読んでおきましょう。その上であちこちのサイトをめぐられると良いでしょう。　私はこの世界１７年になりますが、その方法が最も早い上達方法です。理系科目の勉強とまったく同じで、基礎からきちんと積み上げていくととっても簡単ですが、対症療法的な学び方では挫折します。

outbrave · Answer

UL要素のデフォルトの余白が原因では。

/* padding-top: 10px;
padding-bottom: 10px; */
padding: 10px 0;

ORUKA1951 · Answer

HTMLやスタイルシートの書き方を知らない(^^)というだけ。仕様書を見たこともないのじゃないかと

ホーム
リンク１
リンク２

div.nav{width:100%;background-color:silver;line-height:2em;text-align:center;} div.nav ul,div.nav ul li{margin:0;padding:0;list-style:none;} div.nav ul li{font-size:16px;display:inline-block;width:30%;position:relative;} div.nav ul li+li{border-left:solid blue 3px;} div.nav ul li a{display:block;width:100%;height:100%;text-decoration:none;} div.nav ul li a:hover{background-color:white;} ※ CSS2以降、セレクタは原則として基点となるセレクタを書く。　.navは、クラスセレクタですが、ブラウザは*.navと解釈して処理します。　　*は全称セレクタ ※ いちいちclass="nav_item"のようなclassは書かない。煩雑になる。　きちんと子孫セレクタ,子供セレクタを使うと継承や詳細度で悩まなくてすむ。 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) 　はじめはややこしいかもしれないが、この二項目はCSSを利用するときに絶対に必修です。 ※ 縦の中央に配置する目的でtableなのでしょうが、line-heightで制御できるはず divで囲んでそれにclass="nav"としているのは、「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」および、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )によります。 HTML5ではとなるべきだからです。 nav{width:100%;background-color:silver;line-height:2em;text-align:center;} nav ul,nav ul li{margin:0;padding:0;list-style:none;} nav ul li{font-size:16px;display:inline-block;width:30%;position:relative;} nav ul li+li{border-left:solid blue 3px;} nav ul li a{display:block;width:100%;height:100%;text-decoration:none;} nav ul li a:hover{background-color:white;} nav ul li a[href="/A"]:hover{background-color:lime;} はみ出した理由たぶんオリジナルは、互換モードを前提としているのでしょう。互換モードはブラウザによって大きな差異が出るため使うべきではない。として（旧）IEで見るとはみ出ないのでは？　また、ブラウザによってmarginかpaddingかの差はありますがul,liはmarginを持つブラウザが多い。

横並びのリストで左端がはみ出る

＞という認識であってますでしょうか？

＞お察しの通り、初心者で入門書に載っている例を、１つずつ<main>～</main>に入れて試しているような段階です。

UL要素のデフォルトの余白が原因では。

HTMLやスタイルシートの書き方を知らない(^^)というだけ。

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

このQ&Aを見た人はこんなQ&Aも見ています

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

このQ&Aを見た人がよく見るQ&A

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

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