0

在这个网站上，菜单的结构如下：

<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 之外的所有菜单项都会出现此问题。

4

2 回答 2

3

您的<li>标签是display: inline-block;并且标签之间有空格。

因为您的<li>标签是inline-block，所以它们尊重 HTML 中的空格，就像inline元素和文本一样。

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

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

于 2013-09-16T17:47:23.813 回答
1

你应该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;
}

你准备好了……

于 2013-09-16T18:21:31.460 回答