html - 使用 CSS 设置的背景颜色未覆盖列表的最后一个元素

Question

我正在设计一个网页，其中有一个导航栏，我将导航元素的背景保持为深蓝色。但是，它一直缺少我的导航列表中的最后一个元素，并且没有将其颜色设为蓝色。

这是html代码:

<div id="content_block">
<div id="nav_bar">
<ul style="margin:0px; padding:10px 0px;" >
<li ><a  href="x.html#C1">PATENTS</a></li>
<li ><a  href="x.html#C2"><span style="position:relative;left:9px;">TRADEMARKS</span></a></li>
<li ><a  href="x.html#C3"><span style="position:relative;left:18px;">IP LAW &amp; POLICY </span></a></li>
<li ><a  href="x.html#C4"><span style="position:relative;left:27px;">PRODUCTS &amp; SERVICES</span></a></li>
<li ><a  href="x.html#C5"><span style="position:relative;left:36px;">INVENTORS</span></a></li>
<li ><a  href="x.html#C6"><span style="position:relative;left:45px;">NEWS &amp; NOTICES</span></a></li>
<li ><a  href="x.html#C7"><span style="position:relative;left:54px;">FAQs</span></a></li>
<li></li>
</ul>
</div>
</div>

这是我的 CSS 代码

#content_block{
background-color:#FFFFFF;
margin:10px 0px
border:2px;
padding:10px 0px;
height:400px;
width:1024px;
}

#text{
max-height:400px;
max-width:900px;
margin:10px;
padding:5px}


#nav_bar{
margin:0px;
border:0px;
position:relative;
width:1024px;
}

ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}



li
{display:inline;
float:left;
background-color:#2E40AC;
color:#BAD2FF;
}

Answer 1

这是因为您已将背景颜色设置为 li 元素，但文本本身位于 span 元素内，该元素相对定位并被其推向 left 属性超出 li 元素背景颜色范围。

与其玩 position:relative 和 left:value 你应该使用 margin 或 padding 来达到同样的效果> 属性(property)。

删除 span 后，将 padding:0px 10px; 属性添加到 li 元素。