为了账号安全,请及时绑定邮箱和手机立即绑定

nowrap内联块之间的空间

nowrap内联块之间的空间

ITMISS 2019-11-04 10:53:25
我想要几个相邻的块元素,它们占据整个浏览器的宽度。使用white-space: nowrap,效果很好,但是在一个元素和另一个元素之间存在几个像素的随机空间:body { margin: 0; padding: 0; }#container1 { white-space: nowrap; position: absolute; width: 100%; }#container1 div { display: inline-block; width: 100%; height: 200px; }<div id="container1">    <div style="background: red;"></div>    <div style="background: yellow;"></div>    <div style="background: green;"></div>    <div style="background: blue;"></div></div>这是jsBin演示。没有填充,没有边距,没有边框,没有偏移。
查看完整描述

3 回答

?
慕斯709654

TA贡献1840条经验 获得超5个赞

这是因为inline(-block)元素之间有一个空格字符(一个换行符和一些制表符算作一个空格),可以通过这样注释空格来解决此问题:


<div style="background: red;"></div><!-- 

 --><div style="background: yellow;"></div><!-- 

 --><div style="background: green;"></div><!-- 

 --><div style="background: blue;"></div>

在线演示。


实际上,这不是错误,而是内联元素的正常行为。就像将图像放置在文本行旁边,或在输入元素旁边放置按钮一样。


有几种方法可以删除inline(-block)元素之间的空间:


最小化HTML

负边距

注释掉空白

打破结束标记

将父级的字体大小设置为零,然后为子级重置

浮动内联项目

使用flexbox


查看完整回答
反对 回复 2019-11-04
?
FFIVE

TA贡献1797条经验 获得超6个赞

我曾经遇到过这个问题,并且使用了此CSS属性。有时它的帮助。


font-size:0;


查看完整回答
反对 回复 2019-11-04
  • 3 回答
  • 0 关注
  • 408 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信