首页 > 其他 > 详细

关于display:inline-block和float:left的区别

时间:2016-01-22 18:01:10      阅读:180      评论:0      收藏:0      [点我收藏+]
 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   }

展示效果:

技术分享

关于display:inline-block和float:left的区别

原文:http://www.cnblogs.com/Jinmj/p/5151415.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!