html中竖线分隔符怎么设定

html-css05

html中竖线分隔符怎么设定,第1张

你好！html里是没有自带的中竖线分隔符，但是你可以用div+CSS制作出一个，也就是用边框线来拉一个出来，宽高度由你自己定。参考如下：

<div style="height:100pxwidth:1pxborder-left:1px #000 solid"></div>

希望我这样的回答能帮到你。

介绍两种方法

1.带竖线的字，在每个导航标记后面加入 '|'这个就是竖线

2.直接用边框

单个导航的样式加上:border-right:1px solid #ddd

设置分割线在我多个的经验施行后，没有一成不变通用的方法，得根据要求采用最适合的。

1、使用字符“|”，适合导航栏间距不一致时，也就是不适合你。

2、采用背景方式，背景图片即是那条间隔线，需要形成jpg、gif、png格式的小图片，在背景里设置居左，并控制一下垂直位移，这样就会出现你第一张图的要求。

3、但最后一项可能会出现没有间隔线的情况，那么就多添加一个空的li或a，这样就多出来一个间隔线，好看。

具体细节需要把握，代码举例：

xlMenu a { background:url(menuLine.gif) no-repeat display:block width:77px text-align:center float:left}

.xlMenu a.first { width:43px background:none text-align:left}

效果：

小图标：

很小很小的一条线。。。