display:inline-block引发的水平间隙的问题

最新推荐文章于 2023-01-07 21:32:06 发布

柒年时光

最新推荐文章于 2023-01-07 21:32:06 发布

阅读量428

点赞数

CC 4.0 BY-SA版权

分类专栏： DIV+CSS设计文章标签： display

本文链接：https://blog.youkuaiyun.com/jqq125/article/details/51620317

DIV+CSS设计专栏收录该内容

3 篇文章

订阅专栏

本文探讨了Apple中国官网导航栏的布局技巧，在未使用flex布局且各导航项为inline-block的情况下，如何实现平均分布效果。文章还介绍了inline-block元素间的间距问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

     在模仿Apple中国官网设计时，发现导航列表的实现了平均分布，在未使用flex属性，未设置每个导航条目的宽度时，且display使用了inline-block属性值时，很好
奇它到底是怎么实现的。大家都知道inline-block会带来水平间隙的困扰(即使你的各个子元素的内容加起来宽度刚刚等于父元素宽度，但在使用display：inline-block时
，最后的部分子元素还是会溢出到下一行）。虽然没搞懂Apple官网导航条目是怎么实现两端布局的，但在网上搜到了实现的方法：原理还没太搞懂，搞懂了更新：

     好神奇的感觉，以后再也不用担心inline-block 带来的空隙问题了。