0

ナビゲーションバーがあり、ナビゲーション要素の背景を濃い青に保っているWebページをデザインしています。ただし、ナビゲーションリストの最後の要素が欠落し続け、色が青になりません。

画像は次のようになります。

これが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;
}
4

1 に答える 1

1

これは、要素に背景色を設定しliたが、要素内にテキスト自体が相対的に配置されており、そのプロパティによって要素の背景色の範囲外spanにプッシュされているためです。leftli

で遊ぶのではなく、またはプロパティを使用して同じことを達成する必要がposition:relativeあります。left:valuemarginpadding

削除したら、要素にプロパティをspan追加します。padding:0px 10px;li

于 2012-09-08T09:11:27.977 に答える