困扰初学者的小竖线

　　解决初学者的小问题;

　　我们平时在写网页的时候经常看到两个超链接中间会存在一个小竖线，如下图：

　　问：如何实现

　　可以给你讲三种方法;

　　第一种：边框实现法

　　css样式：

<style>

* {

margin: 0;

padding: 0;

}

div {

height: 40px;

background: #999;

}

a {

text-decoration: none;

color: #000;

float: left;

padding: 0 10px;

font-size: 12px;

border-right: 1px solid #000;

margin-top: 10px;

}

.last {

border-right: none;

}

</style>

　　html结构

<div>

</div>

　　这个方法有点小难搞，得控制margin，padding，还得计算距离上面的距离，难搞奥!!!那这个怎么办呢?莫慌我来告诉你怎么搞定!

　　第二种：背景图片实现法

　　css样式：

<style>

* {

margin: 0;

padding: 0;

}

div {

height: 40px;

background: #999;

font-size: 12px;

line-height: 40px;

}

a {

text-decoration: none;

color: #000;

float: left;

padding: 0 10px;

background: url(line.jpg) no-repeat right center;

}

.last {

background: none;

}

</style>

　　html结构：

<div>

</div>

　　这种方法就没有那么多margin，padding 了，只需要一个padding就搞定了是不是很厉害的亚子

　　如果你觉得这种方法已经很好了，那么我告诉你还有哦。

　　第三种：手写实现法

　　css样式：

<style>

* {

margin: 0;

padding: 0;

}

div {

height: 40px;

background: #999;

font-size: 12px;

line-height: 40px;

}

a {

text-decoration: none;

color: #000;

float: left;

padding: 0 10px;

}

span {

float: left;

}

</style>

　　html结构：

<div>

</div>

　　且慢，请听我说，自己手写 “|” 相对于前两种方式来说更方便一些，前两种方式最后一个元素的 “|” 都需要单独去掉的，自己手写不需要就可以不写，前两种方式还会涉及到选择器的权重问题，如果你的权重不够可能导致最后一个没有的去不掉噢。

　　更多关于 web前端培训的问题，欢迎咨询千锋教育在线名师，如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问，获取试听资格来试听我们的课程，在线零距离接触千锋教育大咖名师，让你轻松从入门到精通。