带有 "white-space: nowrap "的元素宽度不会根据子内容调整。

Question

我试图用（平铺）背景图片创建一个水平滚动的窗格，使用了 溢出-x: 滚动 ＆amp; 空格：nowrap. 该窗格跨越了任意数量的元素。

CSS.HTML: 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>

fiddle demo

我希望背景磁贴能自动跨越整个窗格的宽度，包括所有的项目元素。目前它只填充到框架的宽度。罪魁祸首似乎是窗格宽度属性--它没有调整到窗格内容的整体宽度。

当然，通过手动调整宽度属性可以工作，但我需要它动态调整。

我如何让窗格的背景图片填满整个窗格的宽度？有没有其他方法可以达到同样的效果？

Answer 1

添加这行到 .pane

display: inline-block;

Answer 2

简答 。

block 元素，如 <div> 的宽度（如果没有使用 width 设置），并且不会进一步扩展（即使子内容溢出）。inline 元素，如 <span>，它将采用子内容的宽度来代替。

因此，通过使用 inline-block 你将同时受益于子内容的宽度和高度，并得到你想要的东西。

(也有其他的解决方案，例如: float: left;, position: absolute;, ...)

---

更多的解释。

我也遇到了同样的问题，我想创建一个带填充的旋转木马（或按上文中的要求，带平铺的水平滚动窗格），这样最后一个项目就不会被折叠到视口的边缘。

所以基本上，你会有一个可滚动的旋转木马元素(这个旋转木马元素是由你的 frame)，然后是一个带有填充物的瓷砖容器(the pane)，最后是瓦片(the items) :

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>

正如你所看到的，padding在开头工作，但在结尾没有工作，因为 pane的宽度不会超出父级的宽度(父级宽度的 frame的宽度）。)

在本例中，添加 display: inline-block; 在...上 pane 解决了这个问题。

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;) :

有点偏离了上级的问题，上级的问题是关于《公约》的。white-space: nowrap; 规则，如果你正在寻找一个更现代的解决方案来创建一个旋转木马，你可以使用 flex 规则，因为在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>

Answer 3

你可以在框架中定义背景图片，也就是你的整个面板。

http:/jsfiddle.neterenyener9u29k6

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