用行内块实现分页样式

代码

<style type="text/css">
*{/*去除默认的距离*/
	margin: 0;
	padding: 0;
}
.box{text-align: center;} /*让盒子内所有a元素水平居中*/


.box a{
	display: inline-block;
	width: 36px;
	height: 36px;
	line-height: 36px; /*与height配合实现垂直居中*/
	text-align: center;
	border: 1px solid #ccc;
	background-color: #f7f7f7;
	text-decoration: none; /*去掉下划线*/

	font-size: 14px;
}

/*上一页下一页样式*/
.box .previous,
.box .next{
	width: 85px;
}

/*选中页样式，省略号样式*/
.box .current,
.box .elp{
	background-color: #fff;
	border: none;
}

/*到第几页输入框*/
.box input{
	height: 36px;
	width: 45px;
	border: 1px solid #ccc;
	outline: none; /*选中时的边框*/
}

.box button{
	width: 60px;
	height: 36px;
	border: 1px solid #ccc;
	background-color: #f7f7f7;
}
</style>
<div class="box">
	<a href="" class="previous">&lt;&lt;上一页</a>
	<a href="" class="current">1</a>
	<a href="">2</a>
	<a href="">3</a>
	<a href="">4</a>
	<a href="">5</a>
	<a href="">6</a>
	<a href="">7</a>
	<a href="" class="elp">...</a>
	<a href="" class="next">下一页&gt;&gt;</a>
	到第 <input type="text">页
	<button>确定</button>
</div>

效果：

<<上一页 1 2 3 4 5 6 7 ... 下一页>> 到第 页 确定