<div class="pag">
<a href="#">首页</a>
<a href="#">上一页</a>
<a href="#" class="choose">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">下一页</a>
<a href="#">最后</a>
</div>
展示效果：
这是一段分页的html，关于他的样式我写了两种方式。
1.display:inline-block
.pag a{
display: inline-block;
border: 1px #ddd solid;
padding: 6px 13px;
background: #fff;
font-size: 16px;
color: #333333;
text-decoration: none;
}
.paging .pag .choose{
background: #00a1f6;
color: #fff;
}
展示效果：
2.float:left
.pag a{
float: left;
border: 1px #ddd solid;
padding: 6px 13px;
background: #fff;
font-size: 16px;
color: #333333;
text-decoration: none;
}
.pag .choose{
background: #00a1f6;
color: #fff;
}
展示效果: