关于inline-block和浮动
老师好！首先感谢老师耐心点评作业~
本次作业中banner区域的小圆点我一开始是使用了display:inline-block让其在一行显示，但是这样在缩小页面或在不同浏览器/系统上显示时，会造成圆点分成了2行显示的情况。最后还是改用了左浮。
还有记得以前视频里老师也有一两次是一开始想使用inline-block，但最后还是改成了浮动或其他布局方式。想问下这是不是说明在实际开发中浮动要比inline-block更实用呢？什么情况下推荐使用inline-block呢？
期待老师进一步回答，谢谢！
15
收起
正在回答
1回答
同学你好，问题解答如下：
1、并不是，实际开发中，两者都很实用，没有特别推荐的，根据个人的开发习惯选择其中的一种方式即可。
2、在批复文档里也有解释原因，主要是因为设置为inline-block后，html标签之间的换行会被解析为空白符，不同浏览器/系统解析不同，导致空白符占据的宽度不同，影响了所有小圆点占据页面宽度的总和，所以出现了换行的效果。
如果不想调整为浮动，依旧使用inline-block实现效果，可以参考如下两种方式解决：
（1）去掉html中标签之间的换行，紧挨着显示（一般不推荐）
（2）父元素设置font-size:0;清除空白，单独给inline-block元素添加font-size属性设置字体大小
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星