背景颜色不会将整个背景填充到边框边缘

Question

我需要一些关于我编写的 CSS 的帮助。我有一个在右侧对齐的菜单，但是当我尝试填充背景颜色时，它不会填充到边框边缘。我知道问题与边界有关，并且每个菜单项之间存在间隙，但是我似乎无法找出解决方案。任何帮助将不胜感激。

PHP/HTML：

<div id="header">
   <div id="menu">
      <?php wp_nav_menu(array('theme_location' => 'header-menu')); ?>
   </div>
</div>

CSS：

#header, #menu ul {
   background-color: #fff;
   text-align: right;
   line-height: 65px;
   list-style-type: none;
}

#menu {
   border-bottom: 1px solid rgba(231, 76, 60,0.6);
}

#menu li {
   display: inline-block;
   border-left: 1px dotted rgba(231, 76, 60,0.6);
}

#menu a {
   display: block;
   padding: 0 10px 0 10px;
   text-decoration: none;
   color: #c0392b;
   font-family: 'Open Sans', sans-serif;
}

#menu a:hover {
   background-color: #c0392b;
   color: #fff;
}

感谢任何帮助:)

Answer 1

您的菜单项之间的差距只是一个字符空间。您应该修改您的 HTML 以排除元素之间的空格，或者只为 #menu 设置 font-size:0 ，然后为链接设置正确的字体大小。

#header, #menu ul {
   background-color: #fff;
   text-align: right;
   line-height: 65px;
   list-style-type: none;
}

#menu {
   border-bottom: 1px solid rgba(231, 76, 60,0.6);
   font-size: 0;
}

#menu li {
   display: inline-block;
   border-left: 1px dotted rgba(231, 76, 60,0.6);
}

#menu a {
   display: block;
   padding: 0 10px 0 10px;
   text-decoration: none;
   color: #c0392b;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
}

#menu a:hover {
   background-color: #c0392b;
   color: #fff;
}

Answer 2

我看到你应用了列表元素inline-block，这是一个依赖于空格的方法，它依赖于字体设置，所以空格即将到来。

解决将font-size 指定为内联块元素并将font-size:0 设置为父容器的问题。

如下更新您的代码：

#menu {
   border-bottom: 1px solid rgba(231, 76, 60,0.6);
   font-size:0
}
#menu li {
   display: inline-block;
   border-left: 1px dotted rgba(231, 76, 60,0.6);
   font-size:14px
}