1

CSS を使用して HTML でテーブル付きの水平メニュー バーを作成してデザインしようとしています。しかし、パディングは私が思うようには機能しません: ユーザーがマウスで「ホバー」したときに、li 全体の背景色を変更しようとしているときです。しかし、パディングは間違っているようです。

CSSでの私のコードは次のとおりです（Sassy CSSを使用）：

/* just to be sure the default of browser doesn't change look */
* {
    margin:0;
    padding:0;
}

/* some other design code ... */

#nav-menu {
    padding:5px;
    text-align:center;
    
    /* change background: browser specific gradient */
    background:$menu-bgcolor;
    
    li {
        list-style:none;
        display:inline;
        padding:2px 10px 2px 10px;
        
        :hover {
            background-color:$deco-dark;
            color:$deco-verylight;
        }
    }           
}

しかし、結果は次のようになります。

ホバー ステータスのメニュー項目 -- パディングがすべての領域をカバーしていないことがわかります。

ご覧のとおり、変更された背景色 (この場合) は、予想どおり、領域全体(グラデーションのある領域) に$deco-darkは影響しません。liこの動作を変更するにはどうすればよいですか?

4

3 に答える 3

3

SASS を使用すると、次のようになります。

li {
  :hover { } }

内のすべての:hover要素にスタイルを適用します。必要なのはli

li {
  &:hover {} }

liホバーされたときに要素自体にスタイルを適用します。現在、スタイルは のa内部にのみ適用されている可能性がありliます。

于 2012-07-06T18:44:20.973 に答える
0

display: inline-block;代わりにliをに変更してみてください。

于 2012-07-06T18:06:03.387 に答える
0

li にアンカーを配置し、それに応じてアンカーのスタイルを設定することもできます。これは私が通常行うことです。また、ブラントが言ったように、リストまたはテーブルを使用していますか? リストの方がおそらく優れており、実装したものなので、それを使用してください。

于 2012-07-06T18:40:34.853 に答える