1

我有这个 HTML5 代码：

<div id = 'nav'>
    <ul>
        <a href = ''>
            <li>HOME</li>
        </a>
        <a href = ''>
            <li class = 'final_nav'>FAQ</li>
        </a>
    </ul>
</div>

这个 CSS 样式表：

#nav {
    border: 1px solid #000;
    padding: 5px;
    background-color: #E5E5E5;
}
#nav li {
    border-left: 1px solid #000;
    padding: 22px;
    display: inline;
}
#nav li:hover{
    background-color: #A9A9A9;
}
.final_nav {
    border-right: 1px solid #000;
}
#nav a {
    display: inline-block;
}
#nav a:hover {
    text-decoration: none;
}

但是当我将鼠标悬停在 a 上时nav li，该the background-color: #A9A9A9属性无法按我的意愿工作： 在此处输入图像描述

如何更改 CSS 以使深灰色背景占据整个li而不是边框​​？
谢谢

编辑：

抱歉，我意识到这段代码单独运行时可以完美运行，但是当我包含父 div 时，代码会产生上述错误。这是整个标题代码：

HTML：

<div id = 'header'>
    <h1>CONTEST CODING</h1>
    <p>The free programming competition for everyone</p>
    <div id = 'nav'>
        <ul>
            <a href = ''>
                <li>HOME</li>
            </a>
            <a href = ''>
                <li class = 'final_nav'>FAQ</li>
            </a>
        </ul>
    </div>
</div>

CSS：

body {
    margin: auto;
    width: 960px;
    font-family: Helvetica, sans-serif;
    font-size: 16px;
}
#header {
    text-align: center;
}
#nav {
    border: 1px solid #000;
    padding: 5px;
    background-color: #E5E5E5;
}
#nav li {
    border-left: 1px solid #000;
    padding: 22px;
    display: inline;
}
#nav li:hover{
    background-color: #A9A9A9;
}
.final_nav {
    border-right: 1px solid #000;
}
#nav a:hover {
    text-decoration: none;
}

现在有人可以帮我解决我的background-color问题吗？

4

2 回答 2

1

由于您display: inline;在<li>项目上使用，因此 HTML 中它们之间的空格（或换行符）被呈现为好像所有文本一样。

如果您将 HTML 更改为在 之间没有空格<li>并将 也放在<a>内部<li>，则背景颜色应在悬停时填充每个项目。

<div id = 'nav'>
    <ul>

            <li><a href = ''>HOME</a></li><li class = 'final_nav'><a href = ''>FAQ</a></li>

    </ul>
</div>

看到这个代码笔

于 2013-04-18T16:58:39.490 回答
1

据我所知，<li>在 ancor 标签中包装元素并不是最好的方法。这是相反的方式。如果你切换它，那么你所有的 CSS 都可以正常工作。

<div id = 'nav'>
    <ul>
        <li>
            <a href = ''>HOME</a>
        </li>
        <li class="final_nav">
            <a href = ''>FAQ</a>
        </li>
    </ul>
</div>

JSFiddle

于 2013-04-18T17:14:02.513 回答