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

解決済

質問者：a4_chapp
質問日時：2010/05/05 14:37
回答数：2件

ナビゲーション表示の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></li>
<li><a href="B.html">項目Ｂ</a></li>
<li><a href="C.html">項目Ｃ</a></li>
<li><a href="D.html">項目Ｄ</a></li>
<li><a href="E.html">項目Ｅ</a></li>
</ul>

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： zeff#1
回答日時：2010/05/05 15:30

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">

</style>
</head>
<body>
<ul>
<li><a href="A.html">項目Ａ</a></li>
<li><a href="B.html">項目Ｂ</a></li>
<li><a href="C.html">項目Ｃ</a></li>
<li><a href="D.html">項目Ｄ</a></li>
<li><a href="E.html">項目Ｅ</a></li>
</ul>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

zeffさま

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

通報する

お礼日時：2010/05/06 00:10

No.2

回答者： ORUKA1951
回答日時：2010/05/05 20:16

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>
　|　　　　注) ブロック内でリンクを有効にするならこれもblockにする
　|　　　　
　|-- <li>　以下同様
　|--　　|-- <a href="B.html">項目Ｂ</a>

具体的なソースの例
HTML
<ul class="nav">
<li><a href="A.html">項目Ａ</a></li>
<li><a href="B.html">項目Ｂ</a></li>
<li><a href="C.html">項目Ｃ</a></li>
<li><a href="D.html">項目Ｄ</a></li>
<li><a href="E.html">項目Ｅ</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);}