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

Posted 2023-03-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么在CSS里设置导航的分割线相关的知识，希望对你有一定的参考价值。

图是这样的我写的代码是
#ul_li float:left; width:110px; height:43px; text-align:center; font-family:"宋体"; font-size:14px; font-weight:bold; line-height:43px; display:block; border-left-width: 1px; border-left-style: dotted; border-left-color: #e5e5e5;但是出来的图

怎么才能想上面的图一样

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

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;

效果：

小图标：

很小很小的一条线。。。

参考技术A 在CSS里设置导航的分割线，首先，一般做导航条，都是通过ul、li来做，将ul包裹在一个div中，然后设置好width和height，分隔线，换个理解，给li一个右边的边框就可以了，通过代码来理解：
<html>
<head>
<style>
#div1
width:960px;
height:30px;

#div1 ul li
float:left;
width:60px;
height:30px;
border-right:1px solid;

</style>

</head>

<body>
<div id='div1'>
<ul>
<li>muli1</li>
<li>muli1</li>
<li>muli1</li>
<li>muli1</li>
</ul>
</div>

</body>
</html> 参考技术B

把上面那个竖线设为line.jpg图片

然后给li调用背景图片就可以了~~

#ul_li
float:left;
width:110px;
height:43px;
text-align:center;
font-family:"宋体";
font-size:14px;
font-weight:bold;
line-height:43px;
display:block;
background:url(line.jpg) no-repeat right center; padding-right:2px;

这样是最简单有效快速的办法~~

很高兴为您服务，希望您能及时采纳！

参考技术C 你也可以不用图片实现，<span><a>首页</a></span>你可以把标签写成这样，排版就用span来排，然后a标签高度设置低一点，刚好跟文字一样高，再加border-left就可以了参考技术D 两种方法：
1、如果边框线是纯色，没什么效果，直接给a或者是a标签中嵌套span，给span加右边框
2、如果边框线有渐变或其它效果，可以截图，给a或li添加背景图片，定位在右边，上下居中，不铺盖（此方法同样适用于纯色）

以上是关于怎么在CSS里设置导航的分割线的主要内容，如果未能解决你的问题，请参考以下文章