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

您无需保留浮动以消除图像之间的间隙;只需删除代码中图像标记之间的间隙即可。内联元素对代码中的空白区域很敏感，因此请将其删除。

#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>

Answer 2

检查I am trying to remove unwanted space in my header

display:inline-block和float:left for img将为您效劳。

浮在图像上打破溢出

2 个答案: