Question

尝试在菜单项周围填充，当它们悬停在菜单项上时会改变背景颜色。但是，目前填充仅影响元素的一侧而不影响顶部或底部。

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：

#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

简单地将height:20px替换为display:block #menu a height，因为#menu a { padding:20px; display:block; text-decoration:none; }似乎是多余的。

{{1}}

CSS悬停问题（填充）

1 个答案: