html - float 在图像上会中断溢出

Question

#overflowbox {
  overflow: scroll;
  height: 150px;
  width: 300px;
  white-space: nowrap;
}

img {
  float: left; /* Removing the line fixes the issue & images are on a single line,
                  but I need to keep it to remove the vertical space between images.
                  Using 'font-size: 0' didn't work. */
}

<div id="overflowbox">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100"><br> <!-- It should go on next line from here -->
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100">
</div>
<!-- The images should be on a single line -->

一段时间后，我终于找到了为什么我的代码不起作用。我试图做的是让一行图像在一行上并使它们溢出的容器。但不知何故，为图像设置 float: left 属性会破坏它，但我需要保留该属性以移除图像之间的垂直空间。

是否有其他方法可以使它正常工作或进行某种修复？

Answer 1

您不需要保持 float 来消除图像之间的间隙；只需删除代码中图像标签之间的间隙即可。内联元素对代码中的空白很敏感，因此请将其删除。

#overflowbox {
  overflow: scroll;
  height: 150px;
  width: 300px;
  white-space: nowrap;
}
img {
vertical-align:top;
}

<div id="overflowbox">
  <img src="http://via.placeholder.com/100x100"><img src="http://via.placeholder.com/100x100"><img src="http://via.placeholder.com/100x100"><img src="http://via.placeholder.com/100x100"><br><img src="http://via.placeholder.com/100x100"><img src="http://via.placeholder.com/100x100"><img src="http://via.placeholder.com/100x100"><img src="http://via.placeholder.com/100x100">
</div>