我的导航链接有什么问题 a:hover 框不包含填充？只有内容框会改变颜色。

Question

我正在尝试制作导航栏，但我在使用 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>

Answer 1

我已将填充从 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>

我的导航链接有什么问题 a:hover 框不包含填充？只有内容框会改变颜色。

What is wrong with my nav links that the a:hover box doesn't include the padding? Only the content box changes color.

css

navigation

hover

nav

navbar