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

CSS - 溢出滚动无法正常工作

1 个答案: