Question

我有这个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;
}

但是当我将鼠标悬停在nav li上时，the background-color: #A9A9A9属性无法按照我的意愿运行： enter image description here

如何更改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问题吗？

Answer 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>

请参阅此codepen

Answer 2

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

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

JSFiddle

背景色属性不占整个李

2 个答案: