![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
ナビゲーション表示のCSSについて質問させて下さい。
本を参考に以下のようなソースを試しているのですが、各メニューの幅を統一するためにはどうしたらいいのでしょうか?
試しにと、width: 200px;として、li内に設定したりしていますが、変わる気配がありません。
/*css*/
ul{
list-style: none;
text-align: center;
margin: 30px 0px;
color: #fff;
}
li{
display: inline;
white-space: nowrap;
}
li a{
text-decoration: none;
padding: 10px 10px;
color: #fff;
background: transparent;
background: #f60;
}
li a:hover {
color: #fff;
background: #fc0;
}
~html~
<ul>
<li><a href="A.html">項目A</a></li>
<li><a href="B.html">項目B</a></li>
<li><a href="C.html">項目C</a></li>
<li><a href="D.html">項目D</a></li>
<li><a href="E.html">項目E</a></li>
</ul>
お恥ずかしい質問かと思いますが、アドバイスのほど頂戴できたら幸いです。
お忙しいなか恐縮ですが宜しくお願い申し上げます。
No.1ベストアンサー
- 回答日時:
display:inlineにしたものにwidthは効きません。
代わりにaにdisplay:blockを指定してください。
liをinlineにするってことは横並びメニューですよね?
aにさらにfloat:leftをしてやりましょう。
・ulとliに適当に幅をつけました。
・ulに初期値で(ブラウザが)paddingを取るので消しておきます。
・widthとpaddingを同時に指定するとIE6でバグが起こるので、横の余白は指定しないでください。text-align:center;にするだけ。
・floatさせるとulの高さがなくなってしまうので、ulにheightを指定し、aのline-heightを同じ値にしてください。これで縦の余白を取ります。
<style type="text/css">
<!--
body{margin: 0px;padding: 0px;}
ul{
list-style: none;
width:700px;/*140x5*/
height:2em;
margin: 30px 0px;
padding:0;
color: #fff;
}
li{
display: inline;
white-space: nowrap;
}
li a{
float:left;
display:block;
width:140px;
line-height:2em;
text-align: center;
text-decoration: none;
color: #fff;
background: transparent;
background: #f60;
}
li a:hover {
color: #fff;
background: #fc0;
}
-->
</style>
</head>
<body>
<ul>
<li><a href="A.html">項目A</a></li>
<li><a href="B.html">項目B</a></li>
<li><a href="C.html">項目C</a></li>
<li><a href="D.html">項目D</a></li>
<li><a href="E.html">項目E</a></li>
</ul>
</body>
</html>
zeffさま
はじめまして。早速のアドバイス、ご丁寧な対応をありがとうございます。
改めてスタイルシートって奥が深いな・・と思いました。勉強になりました。ありがとうございます。
No.2
- 回答日時:
CSSにいくつか基本的なミスがあります。
color: #fff; /* 一部のブラウザは16進数は二桁出ないとだめ。あるいはrgb()で */
background: #f60; /* これは、#F06000かrgb()で */
inline要素にはボックスとして寸法を指定できません。
9.2.1 ブロック要素とブロックボックス (
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
次のように設定します。
<ul> これをブロック要素にしてmarginとpadding、
| および全体のサイズを決定する
| 注) list-styleをnoneにする。(IEはbockにしても
| このプロパティが残っている)
| 注) ブラウザによってデフォルトのmargin,padding値
| が異なる。ulではなくliに持っている場合もある。
| そのため、一括して指定するほうが効率的
| 注) 内包するブロックにfloatさせるためrelativeかabsolute
|
|-- <li>これもブロック要素にしてfloatをかける。
| | 注) floatは親コンテナブロックがstatic以外であること
| | 注) ここでもmargin,paddingは明示的に指定すること
| |
| |-- <a href="A.html">項目A</a>
| 注) ブロック内でリンクを有効にするならこれもblockにする
|
|-- <li> 以下同様
|-- |-- <a href="B.html">項目B</a>
具体的なソースの例
HTML
<ul class="nav"><!-- HTML5ではnav要素が導入されるはず -->
<li><a href="A.html">項目A</a></li>
<li><a href="B.html">項目B</a></li>
<li><a href="C.html">項目C</a></li>
<li><a href="D.html">項目D</a></li>
<li><a href="E.html">項目E</a></li>
</ul>
CSS:最もシンプルでブラウザに依存しない。
firefox,Opera,safari,GoogleChrome,InternetExplorer
ul.nav,ul.nav li{display:block;margin:0px;padding:0px;border:solid 0px blue;list-style:none;}
ul.nav{width:100%;height:40px;line-height:40px;position:relative;text-align:center;}
ul.nav li{width:20%;float:left;}
ul.nav li a{display:block;width:99%;height:100%;margin-left:1%;background-color:white;text-decoration:none;}
ul.nav li a:link{background-color:rgb(180,180,180);}
ul.nav li a:visited{background-color:rgb(112,112,112);}
ul.nav li a:focus,ul.nav li a:hover{background-color:rgb(255,180,0);}
ul.nav li a:active{background-color:rgb(255,255,0);}
ORUKA1951さま
はじめまして。ご親切な対応をありがとうございます。
見るべきところとか、考えさせられました。勉強になります。ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
レスポンシブWebデザインでリン...
-
サイドメニューのロールオーバ...
-
リストの数字のフォントサイズ...
-
リストマーカーをボックス内に...
-
CSS li float 2列組み
-
WordPress 新しいカテゴリに過...
-
スマホの実機でレイアウトが崩...
-
<ul><li></li></ul>にするメリ...
-
テーブル内のプルダウンの下に...
-
<div>と<div>の隙間を無くす方法
-
dlタグの中にdivは使える?
-
<li>で改行する横並びのメニュー
-
li 長さ指定
-
<ol><li> 左側にスペースがで...
-
「CSS」リストの2段組どのよう...
-
CSSのデクレッシェンド(>)と...
-
スマホサイトのホームページの...
-
divタグ内のコンテンツが重なっ...
-
ナビゲーション表示のCSSについ...
-
プルダウンメニューの背景色を...
マンスリーランキングこのカテゴリの人気マンスリー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>タグで、数字などを...
おすすめ情報