我正在设计一个网页,其中有一个导航栏,我将导航元素的背景保持为深蓝色。但是,它一直缺少我的导航列表中的最后一个元素,并且没有将其颜色设为蓝色。
这是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 & POLICY </span></a></li>
<li ><a href="x.html#C4"><span style="position:relative;left:27px;">PRODUCTS & 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 & 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;
}
最佳答案
这是因为您已将背景颜色设置为 li
元素,但文本本身位于 span
元素内,该元素相对定位并被其推向 left
属性超出 li
元素背景颜色范围。
与其玩 position:relative
和 left:value
你应该使用 margin
或 padding
来达到同样的效果> 属性(property)。
删除 span
后,将 padding:0px 10px;
属性添加到 li
元素。
关于html - 使用 CSS 设置的背景颜色未覆盖列表的最后一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12329422/