css属性 display:inline-block
该属性的特点:
1.允许内联元素显示一行
2.支持宽度和高度
3.如果宽度没有设置,那么根据内容自动撑开。
小例子:
一个分页小效果
<body>
<div class="pagebox">
<a href="" class="pageBtn">上一页</a>
<a href="">1</a>
<a href="">2</a>
<a href="" class="active">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="" class="pageBtn">下一页</a>
</div>
</body>
css代码
<style type="text/css">
a{
border:1px solid #e0e1e0;
width: 17px;
height: 20px;
/*如果用block 由于block是独占一行的 所以改为inline -block*/
display: inline-block;
text-align: center;
line-height: 20px;
text-decoration: none;
color: #2052a3;
font-size: 12px/20px "宋体";
}
.pageBtn{
width: 64px;
}
a:hover{
background-color: #1f3a87;
color: #fff;
}
.active{
color: #fff;
background-color: #1f3a87;
}
</style>
显示效果: