0

リンク：http ：//danhumphrey.co.uk/nav/

ご覧のとおり、最後のアイテムにカーソルを合わせると、ボックスの半分しか表示されません。

のパディングとマージンを試してみましたが、li失敗しました。h2a

どんな助けでも大歓迎です。

4

4 に答える 4

1

問題は、以下のようにいくつかの css 変更を行う固定幅にあります。

nav {
 height: auto;
 padding: 0;
 margin: 23px auto 0;
 display: block;
 position: relative;
 text-align: center;
 line-height: 23px;
 height: 29px;

}
ul#headNav {
 padding: 0px 0 0 0;
 display: inline-block;
 background: #7F7C74;
background: -moz-linear-gradient(top, #7F7C74 0%, #94918A 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7F7C74), color-stop(100%,#94918A));
background: -webkit-linear-gradient(top, #7F7C74 0%,#94918A 100%);
background: -o-linear-gradient(top, #7F7C74 0%,#94918A 100%);
background: -ms-linear-gradient(top, #7F7C74 0%,#94918A 100%);
background: linear-gradient(top, #7F7C74 0%,#94918A 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7c74', endColorstr='#94918a',GradientType=0 );
}

注:削除width:960px;して<nav>追加text-align:centerし、すべてのグラデーション CSSdisplay:inline-block;を移動しました。#headNav

作業フィドル: http://jsfiddle.net/surendraVsingh/pZkk9/1/

于 2012-07-09T09:14:46.263 に答える
0

インラインを削除し、style="width: 40px;"この行をcssに追加します。

nav ul li:last-child{width: 91px;}
于 2012-07-09T09:12:55.530 に答える
0

Width最後の li 要素までインラインで定義しました -width: 40px;

幅は必要ありません。削除するか、何らかの理由で必要な場合は幅を大きくするwidth: 95px;と機能します。最新の Firefox でテスト済み

于 2012-07-09T09:07:41.553 に答える
0

問題は、灰色のバーの前にあるリンクの背景を変更することですが、幅はそれほど広くありません。いくつかのオプションがあります:

  • メニュー項目の幅を修正し、それらが正しい幅になるようにします (おそらく境界線を含む) または

  • 要素にすべての背景を設定しaます（この方法では、サイズは自然に同じになります）

于 2012-07-09T09:08:37.747 に答える