2

私は自分のウェブサイトで作業していて、今日脳が崩壊しています。

まず、私がいる場所は次のとおりです。http: //www.lenniemoore.com/home.html および関連するcssファイル： http： //www.lenniemoore.com/assets/desktop.css

私のナビゲーションバーメニューでは、a：active要素を除いて、すべてが背景色で適切にスタイル設定され、機能しています。メニュー項目をクリックまたはクリックしてマウスボタンを押したままにすると、背景の形状が他の要素と同じ形状になりません。

これはパディングの問題だと思いますが、私は1日中すべてのCSSをくまなく調べていて、犯人を見ていません。

これがdesktop.cssからの関連するcssコードです：

    ul{list-style-type:none;margin:0 0 5px -35px;}
    .content ul,.content ol{padding:0 15px 15px 40px;}
    #navigator nav{clear:both;width:950px;padding:4px 0;background:#06c;background:-moz-linear-gradient(-90deg,rgba(0,40,80,0),rgba(0,40,80,0.5)),#06c;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,40,80,0)),to(rgba(0,40,80,0.5))),#06c;background:-o-gradient(linear,left top,left bottom,from(rgba(0,40,80,0)),to(rgba(0,40,80,0.5))),#06c;overflow:auto;border-radius:20px;box-shadow:-3px 3px 2px rgba(64,64,55,0.4);}
    nav ul a,nav ul a:visited{padding:0;margin:0 0 2px 0;display:block;}
    nav li,nav li a{-moz-transition-duration:0.25s;-webkit-transition-duration:0.25s;-o-transition-duration:0.25s;}
    nav li{float:left;width:130px;padding:0 0 5px 0;margin:0 5px 0 0;}
    nav li a{display:block;text-align:center;line-height:normal;vertical-align:middle;font-size:120%;font-weight:bold; text-shadow:-2px 2px 0px rgba(0,0,0,1),0px 0px 5px rgba(0,0,0,1);text-decoration:none;color:#eee;}
    nav ul a,nav ul a:visited,nav ul a:focus,nav ul a:active,nav li,nav li.current{border-radius:13px;}
    nav ul a:focus,nav ul a:active,nav li.current,nav li:hover{box-shadow:0px 1px 5px black;}
    nav ul a:focus,nav ul a:active,nav li.current{background:#900;background:-moz-linear-gradient(-90deg,rgba(0,0,0,0.2),rgba(0,0,0,0)),#900;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.2)),to(rgba(0,0,0,0))),#900;background:-o-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.2)),to(rgba(0,0,0,0))),#900;color:#eec;text-shadow:-1px 1px 0px rgba(0,0,0,1),-2px 2px 5px rgba(0,0,0,0.5);}
    nav li:hover{background:#ffd;background:-moz-linear-gradient(-90deg,rgba(0,0,0,0.2),rgba(0,0,0,0)),#ffd;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.2)),to(rgba(0,0,0,0))),#ffd;background:-o-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.2)),to(rgba(0,0,0,0))),#ffd;}
    nav li:hover a{color:#900;text-shadow:-2px 2px 0px rgba(0,0,0,1),-3px 3px 5px rgba(0,0,0,0.5);}

どんな助けでもいただければ幸いです！

4

1 に答える 1

1

現在、にpadding: 0 0 5px 0;設定していnav liます。それを削除し、代わりに配置するとnav ul a, nav ul a:visited、問題は修正されます。

基本的に、リストアイテムのパディングは、アンカーが同じ高さに達することができないことを意味しました。代わりにそのパディングをアンカーに配置することにより、両方の要素が同じ高さになります。

于 2012-09-19T00:12:27.600 に答える