怎么在CSS里设置导航的分割线

html-css028

怎么在CSS里设置导航的分割线,第1张

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

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}

效果：

小图标：

很小很小的一条线。。。

li里面要包含a标签，然后把a标签变成块，再给a标签一个右边框，就是你说的分割竖线，这样来控制a标签的高，就可以控制到分割竖线的高了。

具体代码：

<style>

li{float:leftwidth:100pxheight:30px}

li a{display:blockwidth:100pxheight:30pxborder-right:1px solid #000}

</style>

<ul>

<li><a>导航一</a></li><li><a>导航二</a></li><li><a>导航三</a></li>

</ul>

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

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

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