The small vertical line that bothers beginners

Solve small problems for beginners;
we often see a small vertical line between two hyperlinks when writing web pages, as shown below:

Q: How to achieve

I can tell you three methods;

The first type: border realization method

css style:

<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 structure

<div>
	<a href="#">首页</a>
	<a href="#" class="last">首页</a>
</div>

This method is a bit tricky, you have to control margin, padding, and you have to calculate the distance above the distance. ! !

The second: background image realization method

css style:

<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 structure:

<div>
	<a href="#">首页</a>
	<a href="#" class="last">首页</a>
</div>

This method does not have so many margins and paddings. It only takes one padding to get it done. Isn’t it a very powerful Yazi?

If you think this method is already good, then I tell you there is more.

The third type: handwriting realization method

css style:

<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 structure:

<div>
	<a href="#">首页</a>
	<span>|</span>
	<a href="#">首页</a>
</div>

Wait a minute, please listen to me. It is more convenient to write "|" by yourself. Compared with the first two methods, the "|" in the last element of the first two methods needs to be removed separately. You don’t need to write by yourself. The first two methods will also involve the weight of the selector. If your weight is not enough, it may cause the last one not to be removed.