Question

我正在尝试创建一个div而不是移动到下一行的图像，它只是溢出浏览器宽度。

HTML标记：

<div class="carousel">
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
</div>

CSS：

.carousel {
  overflow: scroll;
  overflow-x: hidden;
}
.carousel img{
  display: inline-block;
}

如果没有为div设置宽度，有没有这样做呢？

CodePen demo

Answer 1

将white-space:nowrap添加到您的.carousel div：

.carousel {
  overflow: scroll;
  overflow-x: hidden;
  white-space:nowrap;
}

http://codepen.io/anon/pen/iCqtc

Answer 2

只是为了补充其他答案，如果你想让旋转木马水平滚动而不是隐藏它的溢出，你可以隐藏overflow-y并设置overflow-x来滚动：

.carousel
{
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
}

Check the example.

Div超出浏览器宽度而没有设置宽度

2 个答案: