みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

ナビゲーション表示のCSSについて質問させて下さい。

ナビゲーション表示の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>


お恥ずかしい質問かと思いますが、アドバイスのほど頂戴できたら幸いです。
お忙しいなか恐縮ですが宜しくお願い申し上げます。

投稿日時 - 2010-05-05 14:37:00

QNo.5873201

すぐに回答ほしいです

質問者が選んだベストアンサー

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>

投稿日時 - 2010-05-05 15:30:15

お礼

zeffさま

はじめまして。早速のアドバイス、ご丁寧な対応をありがとうございます。
改めてスタイルシートって奥が深いな・・と思いました。勉強になりました。ありがとうございます。

投稿日時 - 2010-05-06 00:10:25

ANo.1

このQ&Aは役に立ちましたか?

7人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.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/visuren.html#q5 )

次のように設定します。
<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);}

投稿日時 - 2010-05-05 20:16:00

お礼

ORUKA1951さま

はじめまして。ご親切な対応をありがとうございます。
見るべきところとか、考えさせられました。勉強になります。ありがとうございます。

投稿日時 - 2010-05-06 00:12:25

あなたにオススメの質問