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

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;
}