display:inline-block与float:left的区别

最新推荐文章于 2024-01-03 07:15:00 发布

wangliang_001

最新推荐文章于 2024-01-03 07:15:00 发布

阅读量1.5k

点赞数 2

分类专栏： css 文章标签： css display: inline-block float

本文链接：https://blog.csdn.net/qq_29055201/article/details/84939926

版权

6 篇文章 0 订阅

订阅专栏

display与float是我们常用的布局方式。像display:inline-block;与float:left是我们将元素水平排列的方式。像水平导航栏就可以用这两种方式去实现。那这两种实现方式有什么区别呢？

1.display: inline-block;会产生留白，需要将父元素的font-size设置为0，消除留白。

// html部分
<ul class="inline">
   <li>家居</li>
   <li>二手房</li>
   <li>新房</li>
 </ul>
 
 // css 部分
 .inline li {
    display: inline-block;
  }

在这里插入图片描述

使用浮动，不会产生留白

.inline li{
	float: left
}

在这里插入图片描述

2.如果对多列元素进行排列，如果元素不是等高，浮动会导致布局错乱。而display: inline-block;则不会。
在这里插入图片描述

在这里插入图片描述

综述

关注

专栏目录