懂点css进一下，li做的导航条的分割竖线怎么变得短一些？？
这是所有的网页代码：
<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,但是事实上很长，不太好看，不知道是哪的问题，怎样长能变得短一些？
开始没有超链接的时候竖线还不算很长。
具体代码：
<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时代吗？
我要的是让浏览更顺畅，让维护更方便....本回答被提问者采纳
ul加border-bottom:1px solid #777; 然后给li加上border-bottom:1px solid #fff;
<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>
不知道你要的是不是这样的效果
怎么在CSS里设置导航的分割线
1、使用字符“|”，适合导航栏间距不一致时，也就是不适合你。2、采用背景方式，背景图片即是那条间隔线，需要形成jpg、gif、png格式的小图片，在背景里设置居左，并控制一下垂直位移，这样就会出现你第一张图的要求。3、但最后一项可能会出现没有间隔线的情况，那么就多添加一个空的li或a，这样就...
css分割线间距?
li里面要包含a标签，然后把a标签变成块，再给a标签一个右边框，就是你说的分割竖线，这样来控制a标签的高，就可以控制到分割竖线的高了。如果要用html加上css来制作导航条的话，难度不大，代码也不多。要是用于学习的话建议自己用原生代码实现。怎么用css写出一个1px的水平分割线。1、首先，打开html...
CSS导航列表最右边一个竖线怎么能消除,各种方法都不行!求救!
.nav li{ border-left:1px solid #B7D0E4; } .nav li:first-child{ border-left:none}
如何用CSS定义去掉导航条最边上的竖线,以前有写过但现在忘记了啊...
专门给最边上的元素设一个class，然后 {border-right：none；或border-left：none；或border：none；}
网页导航条中的竖线是怎么输入的?
Shift + \\ 就行了 （｜） 你可以通过css进行定义其大小和显示方式等，比如加个阴影
淘宝导航条的黑线怎么去掉?
分割线没办法去除，不过可以改变颜色，改成和导航条一样的颜色 效果也一样1、一级导航分类（除去“所有宝贝”分类）分隔线颜色代码如下：代码前面还有个小点点哦 别漏掉了 .menu-list .menu{border-color:#000000;} 2、一级导航“所有宝贝”分类分隔线颜色代码如下：.all-cats .link{border-color:#...
如何给CSS的导航中间加条竖线
竖线 理论双来说是我们以为是竖线，其实有可能是键盘上的符号“|”，也有可能是 某一控件（div、span等等）设置宽度为1px，高度比如20px 然后加border或者background做出来的效果。
如何在导航栏里添加竖线
一, 键盘上可以直接输 | 二, 如果是一条虚线的话, 那么是这样做的:用Fireoworks新建一个1*3PX的图片, 在中间画一个点,然后将其导出,再在DW里建一个单元格,将其背景设为这个图片(注意,让它垂直方向重复,水平方向不重复 -- CSS),大功告成 三,CSS <a href="#" style="border-right:1px...
这种网页导航栏,栏目中间有“丨”分割线,如何在html里实现?(DIV+CSS...
基本就是这么干的！你阔以参考一下！<!doctype html><html><head><meta charset="utf-8"><title>test<\/title><style type="text\/css">ol,ul { list-style: none; }#main{margin:20px auto;width:800px;height:40px;background:blue;}#main li{width:100px;height:20px;font-weight:600...
dw导航条右边白色竖线怎样去除
去掉 border-right:2px solid #ccc;
