为什么这些内联块的div包装，尽管他们的父有overflow-x：scroll？ [英] Why are these inline-block divs wrapping in spite of their parent having overflow-x:scroll?

问题描述

在此SSCCE中， .wrapper （为父级）给出 overflow-x：scroll 。所有的子dviv都有 display：inline-block 。我期待孩子div出现在一行，第五和第六 .item 不可见，直到我向右滚动。

In this SSCCE, .wrapper, which is parent, is given overflow-x:scroll. All the child dvivs are given display:inline-block. I was expecting the child divs to appear in a single row, with the fifth and sixth .item not visible until the I scroll rightwards.

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

But instead, the fifth and the sixth .item wrap to the next line. The question is why, and what should I do about it?

* {
  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>

推荐答案

通常，内联级框会尽量避免溢出他们的容器越多越好。您在 .wrapper 元素中有一系列inline-block .item 一旦在 .wrapper 下的当前行上不再有任何空格用于下一个内联块，就会发生换行符，下一个内联块会换行到下一行，其余的项目也一样。请注意，即使没有元素间空格（您使用HTML注释确保它们），也会发生这种情况。

Generally, inline-level boxes do their best to avoid overflowing their containers as much as possible. You have a series of inline-block .items in a .wrapper element. Once there is no longer any space on the current line within .wrapper for the next inline-block, a line break occurs and the next inline-block wraps to the next line, and the rest of the items follow suit. Notice that this happens even when there is no inter-element whitespace (which you have ensured using HTML comments).

overflow 不影响或当其内容溢出时

所以你必须强制inline-blocks实际上溢出容器。最简单的方法是指定 white-space：nowrap 在 .wrapper上，因为你处理的是一系列内联块，它禁止所有换行符机会，甚至在内联块之间：

So you have to force the inline-blocks to actually overflow the container. The simplest way to do this, since you're dealing with a series of inline-blocks, is to specify white-space: nowrap on .wrapper, which suppresses all line break opportunities, even between inline-blocks:

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

这篇关于为什么这些内联块的div包装，尽管他们的父有overflow-x：scroll？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！