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来实现同样的事情。marginpadding

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