背景图像不包括元素的整个宽度

Question

在this website上，菜单具有以下结构：

<ul>
    <li class="page_item page-item-2 current_page_item">
        <a href="index.html">Home</a>
    </li>
    <li class="page_item page-item-7">
        <a href="features/index.html">Features</a>
    </li>
    <li class="page_item page-item-18">
        <a href="news-reviews/index.html">News &amp; Reviews</a>
    </li>
    <li class="page_item page-item-20">
        <a href="contact/index.html">Contact</a>
    </li>
</ul>

current_page_item类通过以下规则将当前所选菜单项的背景更改为黑色：

.mainnav li.current_page_item a {
    background: url("images/bg_nav_hover.png") no-repeat scroll right center transparent;
}

这适用于主菜单项，但对于所有其他项目，所选菜单项的左侧会留下一个小间隙，由下图中的黄色圆圈突出显示

我似乎无法弄清楚为什么除Home之外的所有菜单项都会出现此问题。

Answer 1

您的<li>代码为display: inline-block;且代码之间有空格。

由于您的<li>代码为inline-block，因此它们会尊重HTML中的空格，就像inline元素和文字一样。

最后，背景图像 正确覆盖元素的背景。摆脱间距的最佳选择是删除</li>和下一个<li>标记之间的所有空格。

正如下面@ ajp15243所提到的，你可以省略结束标记，或者使用一些古怪的技巧来让HTML吞噬空白。

Answer 2

您应该将display:table-cell用于.mainnav_wrapper .mainnav ul li课程。 然后添加填充，将菜单项置于ul元素的中心位置：

.mainnav_wrapper ul {
    padding-left:192px;//this is especially for this project
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    text-align: center;
    width: 960px;
}

你准备好了......