懂点css进一下，li做的导航条的分割竖线怎么变得短一些？？
这是所有的网页代码：<html><head><title>用列表做的导航条</title><style><!--body{margin-top:5px;}ul{list-...
这是所有的网页代码：
<html>
<head>
<title>用列表做的导航条</title>
<style>
<!--
body{
margin-top:5px;
}
ul{
list-sytle:none;
margin:0;
}
li{
float:left;
margin:0 10px;
}
.shuxian{
width:1px;
height:9px;
background:#999;
}
a:link,a:visited{font-size:13px;color:#999;text-decoration:none;}
a:hover,a:active{font-size:13px;color:#f00;text-decoration:none;}
-->
</style>
</head>
<body>
<ul>
<li><a href="../">首页</a></li>
<li class=shuxian></li>
<li><a href="../">新闻</a></li>
<li class=shuxian></li>
<li><a href="../">娱乐</a></li>
<li class=shuxian></li>
<li><a href="../">论坛</a></li>
<li class=shuxian></li>
<li><a href="../">搜索</a></li>
<li class=shuxian></li>
<li><a href="../">教育</a></li>
</ul>
</body>
</html>
这是导航那的竖线的CSS（其实是用了背景效果）：
.shuxian{
width:1px;
height:9px;
background:#999;
}
这里虽然写的是height:9px,但是事实上很长，不太好看，不知道是哪的问题，怎样长能变得短一些？
开始没有超链接的时候竖线还不算很长。 展开
<html>
<head>
<title>用列表做的导航条</title>
<style>
<!--
body{
margin-top:5px;
}
ul{
list-sytle:none;
margin:0;
}
li{
float:left;
margin:0 10px;
}
.shuxian{
width:1px;
height:9px;
background:#999;
}
a:link,a:visited{font-size:13px;color:#999;text-decoration:none;}
a:hover,a:active{font-size:13px;color:#f00;text-decoration:none;}
-->
</style>
</head>
<body>
<ul>
<li><a href="../">首页</a></li>
<li class=shuxian></li>
<li><a href="../">新闻</a></li>
<li class=shuxian></li>
<li><a href="../">娱乐</a></li>
<li class=shuxian></li>
<li><a href="../">论坛</a></li>
<li class=shuxian></li>
<li><a href="../">搜索</a></li>
<li class=shuxian></li>
<li><a href="../">教育</a></li>
</ul>
</body>
</html>
这是导航那的竖线的CSS（其实是用了背景效果）：
.shuxian{
width:1px;
height:9px;
background:#999;
}
这里虽然写的是height:9px,但是事实上很长，不太好看，不知道是哪的问题，怎样长能变得短一些？
开始没有超链接的时候竖线还不算很长。 展开
4个回答
展开全部
li里面要包含a标签，然后把a标签变成块，再给a标签一个右边框，就是你说的分割竖线，这样来控制a标签的高，就可以控制到分割竖线的高了。
具体代码：
<style>
li{float:left;width:100px;height:30px;}
li a{display:block;width:100px;height:30px;border-right:1px solid #000;}
</style>
<ul>
<li><a>导航一</a></li><li><a>导航二</a></li><li><a>导航三</a></li>
</ul>
具体代码：
<style>
li{float:left;width:100px;height:30px;}
li a{display:block;width:100px;height:30px;border-right:1px solid #000;}
</style>
<ul>
<li><a>导航一</a></li><li><a>导航二</a></li><li><a>导航三</a></li>
</ul>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
其实有一个很简单就可以解决的办法
就是你直接用键盘上的那个竖线，那它写进
<li>新闻|</li>
<li>娱乐|</li>
<li>教育|</li>
<li>论坛|</li>
....
还教你一招就是
有时候明明可以很简单的用table就能解决的问题
我们还用DIV一个个写，增加了很多多余的代码
难道这就是真正意义上的DIV时代吗？
我要的是让浏览更顺畅，让维护更方便....
就是你直接用键盘上的那个竖线，那它写进
<li>新闻|</li>
<li>娱乐|</li>
<li>教育|</li>
<li>论坛|</li>
....
还教你一招就是
有时候明明可以很简单的用table就能解决的问题
我们还用DIV一个个写，增加了很多多余的代码
难道这就是真正意义上的DIV时代吗？
我要的是让浏览更顺畅，让维护更方便....
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
其实你仔细看会发现这只是两条边框，视觉上看起来像是槽状分割线，可以给
ul加border-bottom:1px solid #777; 然后给li加上border-bottom:1px solid #fff;
ul加border-bottom:1px solid #777; 然后给li加上border-bottom:1px solid #fff;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<title>用列表做的导航条</title>
<style>
<!--
body{
margin-top:5px;
}
ul{
list-sytle:none;
margin:0;
}
li{
float:left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999999;
width: 80px;
margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;
}
.shuxian{
width:1px;
height:9px;
background:#999;
}
a:link,a:visited{font-size:13px;color:#999;text-decoration:none;}
a:hover,a:active{font-size:13px;color:#f00;text-decoration:none;}
-->
</style>
</head>
<body>
<ul>
<li><a href="../">首页</a></li>
<li><a href="../">新闻</a></li>
<li><a href="../">娱乐</a></li>
<li><a href="../">论坛</a></li>
<li><a href="../">搜索</a></li>
<li><a href="../">教育</a></li>
</ul>
</body>
</html>
不知道你要的是不是这样的效果
<head>
<title>用列表做的导航条</title>
<style>
<!--
body{
margin-top:5px;
}
ul{
list-sytle:none;
margin:0;
}
li{
float:left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999999;
width: 80px;
margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;
}
.shuxian{
width:1px;
height:9px;
background:#999;
}
a:link,a:visited{font-size:13px;color:#999;text-decoration:none;}
a:hover,a:active{font-size:13px;color:#f00;text-decoration:none;}
-->
</style>
</head>
<body>
<ul>
<li><a href="../">首页</a></li>
<li><a href="../">新闻</a></li>
<li><a href="../">娱乐</a></li>
<li><a href="../">论坛</a></li>
<li><a href="../">搜索</a></li>
<li><a href="../">教育</a></li>
</ul>
</body>
</html>
不知道你要的是不是这样的效果
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
