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
}

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

2 个答案: