首页 > web前端 > css教程 > 如何消除内联块列表项之间不需要的空格?

如何消除内联块列表项之间不需要的空格?

Linda Hamilton
发布: 2024-12-17 21:26:15
原创
574 人浏览过

How Can I Eliminate Unwanted Spaces Between Inline-Block List Items?

已解决内联块列表项中的空格

内联块列表项之间通常会出现不需要的空格。此问题的出现是由于内联块元素与空白相关的性质以及字体的间距设置。

要解决此问题,请考虑以下措施:

  • Block Together : 将列表项合并为一行以获得最佳间距。
  • 加入标签: 将列表项标签包裹在一起,消除每个项目之间的空格:
<ul>
    <li><div>first</div></li><li><div>first</div></li><li><div>first</div></li><li><div>first</div></li>
</ul>
登录后复制

或者,您可以通过将父元素的字体大小设置为 0 来消除空格:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}
登录后复制

此方法会重置父元素的字体间距,并针对各个列表项内容单独调整字体间距。

以上是如何消除内联块列表项之间不需要的空格?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板