CSS悬停问题（填充）

Question

Trying to have padding around the menu items and when they hover over it changes background colour. 尝试在菜单项周围填充鼠标，并将其悬停在菜单项上时会更改背景颜色。 However, at the moment padding is only effecting the side of the elements and not the top or bottom. 但是，目前，填充仅影响元素的侧面，而不影响顶部或底部。

HTML: HTML：

<html>
<head>
    <link rel="stylesheet" href="style.css" type"text/css" />
</head>
<body>
    <div id="container">
        <div id="header">
            <ul id="menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">About</a></li>
                <li><a href="index.html">Contact</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

CSS: CSS：

#container {
    margin:auto;
    border:1px solid black;
    width:960px;
    height:700px;
}

#header {
    width:960px;
    height:150px;
    border: 1px solid blue;
}

#menu {
    width:800px;
    list-style:none;
}

#menu li {
    float:left;
    margin-left:20px;
    border:1px solid black;
}

#menu a:hover {
    background:blue;
    padding:20px;
}

#menu a {
    padding:20px;
    height:20px;
    text-decoration:none;
}

Answer 1

Simply replace height:20px with display:block for #menu a as height seems redundant from what I can see. 只需更换height:20px与display:block用于#menu a作为height似乎从我所看到的冗余。

#menu a {
  padding:20px;
  display:block;
  text-decoration:none;
}

CSS悬停问题（填充）

问题描述

1 个解决方案

解决方案1
4 已采纳 2012-02-16 12:32:49

CSS悬停问题（填充）

问题描述

1 个解决方案

解决方案1 4 已采纳 2012-02-16 12:32:49

解决方案1
4 已采纳 2012-02-16 12:32:49