关于display:inline-block和float：left的区别 - 奶酪-凌

 1 <div class="pag">
 2     <a href="#">首页</a>
 3     <a href="#">上一页</a>
 4     <a href="#" class="choose">1</a>
 5     <a href="#">2</a>
 6     <a href="#">3</a>
 7     <a href="#">4</a>
 8     <a href="#">5</a>
 9     <a href="#">6</a>
10     <a href="#">下一页</a>
11     <a href="#">最后</a>
12 </div>

展示效果：

这是一段分页的html，关于他的样式我写了两种方式。

1.display:inline-block

 1 .pag a{
 2     display: inline-block;
 3     border: 1px #ddd solid;
 4     padding: 6px 13px;
 5     background: #fff;
 6     font-size: 16px;
 7     color: #333333;
 8     text-decoration: none;
 9 }
10 .paging .pag .choose{
11     background: #00a1f6;
12     color: #fff;
13 }

展示效果：

2.float:left

 1 .pag a{
 2     float: left;
 3     border: 1px #ddd solid;
 4     padding: 6px 13px;
 5     background: #fff;
 6     font-size: 16px;
 7     color: #333333;
 8     text-decoration: none;
 9   }
10   .pag .choose{
11     background: #00a1f6;
12     color: #fff;
13   }

展示效果:

posted on 2016-01-22 15:31 奶酪-凌阅读(740) 评论(0) 收藏举报

刷新页面返回顶部