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

最新推荐文章于 2021-06-04 15:23:08 发布

iteye_15136

最新推荐文章于 2021-06-04 15:23:08 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签： ul布局导航

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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=""，那样会多处很多字节的。

iteye_15136

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
UL布局导航，最后一个外边框怎么去掉

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;
复制链接

扫一扫

专栏目录