html - CSS - 溢出滚动不起作用

Question

我有以下标记(参见我的 Plunker ):

<div class="workflow-step-container">
  <div class="step-container">
      <div class="step-bubble completed">1</div>
      <span class="divider"></span>
  </div>
  <div class="step-container">
      <div class="step-bubble completed">2</div>
      <span class="divider"></span>
  </div>
  ...
</div>

步数(气泡)可以变化。我想要发生的是，如果气泡的数量超过容器宽度，我希望气泡容器可以水平滚动。目前，内容只是换行。

我已经添加了 overflow-x: auto;，但这似乎不起作用。

提前致谢

更新将 white-space:nowrap; 添加到我的 .workflow-step-container 样式后，气泡现在不会按要求换行。但是，在我的实际元素中，内容继续环绕并且永远不会变得可滚动。 Here是截图。我尝试将 .workflow-step-container div 包装在另一个我设置了 overflow-x: hidden; 的 div 中，但这什么也没做。这是一个Plunker .

Answer 1

您可以简单地更改 white-space property父元素的 nowrap为了防止内联级元素换行。这样，当内容溢出时，将添加一个水平滚动条。

Updated Example

.workflow-step-container {
  overflow-x: auto;
  white-space: nowrap;
}

---

根据您的更新，您需要添加 table-layout: fixed/width: 100%到嵌套的祖先table元素。

问题是 table元素的宽度由 .workflow-step-container 的最大宽度决定元素。添加宽度 100%强制父元素采用其父元素的宽度，table-layout: fixed更改布局算法以允许这样做。

Updated Example

.col-xs-8 table {
  table-layout: fixed;
  width: 100%;
}