尽管它们的父级具有溢出-x：滚动，为什么这些内联块 div 会包装？答案

【问题标题】：Why are these inline-block divs wrapping in spite of their parent having overflow-x:scroll?尽管它们的父级具有溢出-x：滚动，为什么这些内联块 div 会包装？
【发布时间】：2016-01-30 23:47:25
【问题描述】：

在此 SSCCE 中，.wrapper，它是父级，被赋予overflow-x:scroll。所有孩子的 dvivs 都被给予display:inline-block。我期待子 div 出现在单行中，第五个和第六个 .item 在我向右滚动之前不可见。

但是，第五个和第六个.item 换行到下一行。 问题是为什么，我应该怎么做？

* {
  margin: 0px;
  padding: 0px;
  border: 0px none;
  background: transparent none repeat scroll 0% 0%;
  font-size: 100%;
  vertical-align: baseline;
}
.wrapper {
  overflow-x: scroll;
  position: relative;
}
div.item {
  /*position:absolute;*/
  display: inline-block;
  width: 25%;
  height: 25vw;
}
.wheat {
  background-color: wheat;
}
.pink {
  background-color: pink;
}
.beige {
  background-color: beige;
}
.gainsboro {
  background-color: gainsboro;
}
.coral {
  background-color: coral;
}
.crimson {
  background-color: crimson;
}
.item1 {
  left: 0%;
}
.item2 {
  left: 25%;
}
.item3 {
  left: 50%;
}
.item4 {
  left: 75%;
}
.item5 {
  left: 100%;
}
.item6 {
  left: 125%;
}
.previous-arrow,
.next-arrow {
  width: 30px;
  height: 50%;
  top: 50%;
  position: absolute;
  display: block;
  opacity: 0.7
}
.previous-arrow {
  text-align: right;
  background-image: url(a2.png);
  background-repeat: none;
}
.previous-arrow,
.next-arrow {
  opacity: 1;
}

<div class="wrapper">
  <!--<a class="previous-arrow" href="">&lt;</a>--><!--
		--><div class="item item1 wheat">a.</div><!--
		--><div class="item item2 pink">a.</div><!--
		--><div class="item item3 beige">a.</div><!--
		--><div class="item item4 gainsboro">a.</div><!--
		--><div class="item item5 coral">a.</div><!--
		--><div class="item item6 crimson">a.</div><!--
		-->
  <!--<a class="next-arrow" href="">&lt;</a>-->
</div>

【问题讨论】：

您可以使用* 通配符选择器，而不是为您的第一个选择器编写每个元素。
@TylerH 谢谢。（现在这让我觉得超级愚蠢 =P）

标签： html css overflow css-position

【解决方案1】：

一般来说，内联级盒子会尽可能地避免容器溢出。在 .wrapper 元素中有一系列内联块 .items。一旦.wrapper 中的当前行上不再有任何空间用于下一个内联块，就会发生换行符，并且下一个内联块会换行到下一行，其余项目也会如此。请注意，即使没有元素间空白（您已使用 HTML cmets 确保了这一点），也会发生这种情况。

容器上overflow 的值不影响是否或何时其内容溢出；它只会在发生溢出确实时改变它及其内容的呈现方式。

所以你必须强制内联块实际溢出容器。由于您要处理一系列内联块，因此最简单的方法是在 .wrapper 上指定 white-space: nowrap，这会抑制所有换行机会，即使在内联块之间也是如此：

.wrapper {
  overflow-x: scroll;
  position: relative;
  white-space: nowrap;
}

* {
  margin: 0px;
  padding: 0px;
  border: 0px none;
  background: transparent none repeat scroll 0% 0%;
  font-size: 100%;
  vertical-align: baseline;
}
.wrapper {
  overflow-x: scroll;
  position: relative;
  white-space: nowrap;
}
div.item {
  display: inline-block;
  width: 25%;
  height: 25vw;
}
.wheat {
  background-color: wheat;
}
.pink {
  background-color: pink;
}
.beige {
  background-color: beige;
}
.gainsboro {
  background-color: gainsboro;
}
.coral {
  background-color: coral;
}
.crimson {
  background-color: crimson;
}
.item1 {
  left: 0%;
}
.item2 {
  left: 25%;
}
.item3 {
  left: 50%;
}
.item4 {
  left: 75%;
}
.item5 {
  left: 100%;
}
.item6 {
  left: 125%;
}
.previous-arrow,
.next-arrow {
  width: 30px;
  height: 50%;
  top: 50%;
  position: absolute;
  display: block;
  opacity: 0.7
}
.previous-arrow {
  text-align: right;
  background-image: url(a2.png);
  background-repeat: none;
}
.previous-arrow,
.next-arrow {
  opacity: 1;
}

<div class="wrapper">
  <!--<a class="previous-arrow" href="">&lt;</a>--><!--
		--><div class="item item1 wheat">a.</div><!--
		--><div class="item item2 pink">a.</div><!--
		--><div class="item item3 beige">a.</div><!--
		--><div class="item item4 gainsboro">a.</div><!--
		--><div class="item item5 coral">a.</div><!--
		--><div class="item item6 crimson">a.</div><!--
		-->
  <!--<a class="next-arrow" href="">&lt;</a>-->
</div>

【讨论】：