我正在尝试制作一个导航栏，但我在使用 a:hover 时遇到了问题。只有内容框会改变颜色，但我希望它是内容框及其周围的填充区域。怎么了？
我已经尝试了所有方法，但由于某种原因只有内容框发生了变化，这看起来很糟糕。我想买一个完整的盒子来改变颜色。我觉得自己像个白痴，有人可以看一下并告诉我我做错了什么吗？
#container {
box-sizing: content-box;
}
body {
font-family: "avenir light", sans-serif;
}
#container{
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.navbar-links {
max-width: 1090px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.navbar-links a:hover {
background: #831517;
color: #FFFFFF;
}
.navbar-links a {
color: #444444;
text-decoration: none;
text-align: center;
}
.navbar ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-decoration: none;
width: 100%;
}
ul li {
list-style: none;
display: inline-block;
margin-top: 50px;
padding: 20px 20px;
}
.navbar {
background-color: #FFFFFF;
overflow: hidden;
height: 91px;
}
#number {
float: right;
padding-right: 0;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-links">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT US</a></li>
<li id="number"><a href="#">(360)679-4444</a></li>
</ul>
</nav>最佳答案
我已将填充从 li 移至 a
查看工作代码:
#container {
box-sizing: content-box;
}
body {
font-family: "avenir light", sans-serif;
}
#container{
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.navbar-links {
max-width: 1090px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.navbar-links a:hover {
background: #831517;
color: #FFFFFF;
}
.navbar-links a {
color: #444444;
text-decoration: none;
text-align: center;
padding: 20px;
}
.navbar ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-decoration: none;
width: 100%;
}
ul li {
list-style: none;
display: inline-block;
margin-top: 50px;
}
.navbar {
background-color: #FFFFFF;
overflow: hidden;
height: 91px;
}
#number {
float: right;
padding-right: 0;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-links">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT US</a></li>
<li id="number"><a href="#">(360)679-4444</a></li>
</ul>
</nav>关于css - 我的导航链接有什么问题 a :hover box doesn't include the padding? 只有内容框会改变颜色。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53687452/