使用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属性来实现相同的目标。

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