怎么在CSS里设置导航的分割线
图是这样的我写的代码是#ul_li{float:left;width:110px;height:43px;text-align:center;font-family:"宋...
图是这样的我写的代码是
#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;}但是出来的图
怎么才能想上面的图一样 展开
#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;}但是出来的图
怎么才能想上面的图一样 展开
7个回答
展开全部
设置分割线在我多个的经验施行后，没有一成不变通用的方法，得根据要求采用最适合的。
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;}效果：
小图标：
很小很小的一条线。。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景。ai生...
点击进入详情页
本回答由博思aippt提供
展开全部
在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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把上面那个竖线设为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;
}这样是最简单有效快速的办法~~
很高兴为您服务，希望您能及时采纳！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你也可以不用图片实现，<span><a>首页</a></span>你可以把标签写成这样，排版就用span来排，然后a标签高度设置低一点，刚好跟文字一样高，再加border-left就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
两种方法：
1、如果边框线是纯色，没什么效果，直接给a或者是a标签中嵌套span，给span加右边框
2、如果边框线有渐变或其它效果，可以截图，给a或li添加背景图片，定位在右边，上下居中，不铺盖（此方法同样适用于纯色）
1、如果边框线是纯色，没什么效果，直接给a或者是a标签中嵌套span，给span加右边框
2、如果边框线有渐变或其它效果，可以截图，给a或li添加背景图片，定位在右边，上下居中，不铺盖（此方法同样适用于纯色）
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（5）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
