具有'white-space: nowrap'属性的元素宽度不会根据子内容调整。

Question

我正在尝试使用overflow-x: scroll和white-space: nowrap来创建一个具有（平铺）背景图像的水平滚动窗格。该窗格跨越任意数量的元素。

CSS：

.frame {
   overflow-x: scroll;
}

.pane {
   background-image: url(free-tile-floor-texture.jpg);
   background-repeat: repeat;
   white-space: nowrap;
}

.item {
   display: inline-block;
   width: 150px;
   height: 50px;
   background-color: grey;
}

HTML：

<div class="frame">
   <div class="pane">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
   </div>
</div>

演示代码

我希望背景图铺满整个面板，包括其中所有元素的宽度。目前它只填充到框架的宽度。问题看起来是面板宽度属性导致的-它不会自适应面板内容的总宽度。

当然，手动调整宽度属性可以解决问题，但我需要它能够动态调整。

如何让面板的背景图填充整个面板的宽度？还有其他实现同样效果的方法吗？

- coprolit

Answer 1

将这一行添加到.pane中

display: inline-block;

- neja

---

加上简短的解释“为什么”对解决问题更有帮助。在 CSS 中已经存在足够多的猜测了…… - bluenote10

Answer 2

简短回答：

block元素（如<div>）默认情况下会采用父元素的宽度（如果没有设置width），并且不会进一步扩展（即使子内容溢出）。 然而，inline元素（如<span>）会采用子内容的宽度。 因此，使用inline-block既可以获得子元素内容的宽高，也可以达到所需的效果。

（其他解决方案也存在，例如：float: left;，position: absolute;等）

---

更多解释：

我遇到了同样的问题，我想要创建一个带有尾部填充的走马灯（或按照OP的要求进行水平滚动和平铺）， 这样最后一个项目就不会被折叠到视口的边缘。

因此，您需要将走马灯元素设置为可滚动的（frame），然后是一个包含填充的平铺板块容器（pane）， 最后是平铺列表项（item）：

body {
    margin: 20px;
}

.frame {
  overflow-x: scroll;
}

.pane {
  background-color: grey;
  padding: 20px;
  white-space: nowrap
}

.item {
  background-color: red;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.item:last-child {
  margin-right: 0;
}

<div class="frame">
  <div class="pane">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

正如您所看到的，填充在开头起作用，但在结尾没有起作用，因为pane的宽度没有超出父元素的宽度（在这种情况下是frame的宽度）。

在pane上添加display: inline-block;可以解决此问题：

body {
    margin: 20px;
}

.frame {
  overflow-x: scroll;
}

.pane {
  background-color: grey;
  display: inline-block;
  padding: 20px;
  white-space: nowrap
}

.item {
  background-color: red;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.item:last-child {
  margin-right: 0;
}

<div class="frame">
  <div class="pane">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

---

现代解决方案（不使用white-space: nowrap;）：

与原帖的问题略有偏差，如果你正在寻找更现代的创建轮播图的方法，可以使用flex规则来实现，因为在弹性容器中的项目默认不会换行，并且这也使得CSS代码更加简洁 ：

body {
    margin: 20px;
}

.frame {
  overflow-x: scroll;
}

.pane {
  background-color: grey;
  display: inline-flex;
  padding: 20px;
}

.item {
  background-color: red;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.item:last-child {
  margin-right: 0;
}

<div class="frame">
  <div class="pane">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

- Typhon

Answer 3

你可以在整个面板中定义背景图片的帧

http://jsfiddle.net/erenyener/9u29k/6/

 .frame {
     overflow-x: scroll;
     background-image: url(http://store.got3d.com/products/30-tile-floor-textures/thumbnails/free-tile-floor-texture.jpg);
     background-repeat: repeat;
}

- Mehmet Eren Yener

---

但是，然后背景图像跟随框架而不是面板。项目在背景图像上滑动而不是停留在其上。因此并不是问题的解决方案。 - coprolit