UL布局导航,最后一个外边框怎么去掉

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#menus
{
margin:auto;
width:900px;
height:38px;
background-color:#1F6193;
background-image: url(imgs/index.jpg);
}
#menus ul
{
height:30px;
text-align:center;
padding-top:8px;
padding-bottom:0px;
}
#menus ul first-child
{
border-right:0px dashed white;
}
#menus ul li
{
list-style-type:none;
display:inline;
padding-left:20px;
padding-right:20px;
border-right:1px dashed white;
}
#menus ul li a
{
font-size:16px;
font-variant:normal;
color:white;
}

#menus ul li a:link{
text-decoration:none;
}
#menus ul li a:active{
color:#F13C01;
text-decoration:underline;
}
#menus ul li a:visited{
text-decoration:none;

}
#menus ul li a:hover{
color:#F13C01;
text-decoration:underline;
cursor:pointer;
background-color:#3671A5;
}


</style>
<title>无标题文档</title>
</head>

<body>

<div id="menus">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">标签A</a></li>
        <li><a href="#">标签BB</a></li>
        <li><a href="#">标签BGT</a></li>
        <li><a href="#">标签BB</a></li>
        <li><a href="#">标签BB</a></li>
        
        <li style="border-right-width:0px;"><a href="#">标CCC签</a></li>
    </ul>
</div>

</body>
</html>

 HTML效果是:



 代码里面,我写了内联样式,很不好,如果用class,有没有ID级别高,最后一个外边框去掉有啥好方法呢?

不希望每个li都写个class="",那样会多处很多字节的。

 

你可能感兴趣的:(ul布局导航)