Question

这是我的示例HTML代码

<div style="overflow-y: visible; overflow-x: scroll; width: 600px;">
  <div style="width: 230px;float:left;">Some label</div>
  <div style="width: 230px;float:left;">Some label</div>
  <div style="width: 230px;float:left;">Some label</div>
  <div style="width: 230px;float:left;">Some label</div>
  <div style="width: 230px;float:left;">Some label</div>
  <div style="width: 230px;float:left;">Some label</div>
</div>

此处示例http://jsfiddle.net/jbfDU/1/

我希望以单行显示所有文本，并且应该显示水平滚动条。但是从示例中您可以看到它们以单行显示，但所有文本都没有显示，滚动条也没有按预期工作。

Answer 1

使用white-space: nowrap作为包装器，使用display: inline-block作为元素

<div style="overflow-y: hidden; overflow-x: scroll; width: 600px; height: 30px;white-space: nowrap;">
  <div style="width: 230px;display:inline-block;">Some label</div>
  <div style="width: 230px;display:inline-block;">Some label</div>
  <div style="width: 230px;display:inline-block;">Some label</div>
  <div style="width: 230px;display:inline-block;">Some label</div>
  <div style="width: 230px;display:inline-block;">Some label</div>
  <div style="width: 230px;display:inline-block;">Some label</div>
</div>

http://jsfiddle.net/jbfDU/4/

使用浮动时水平溢出不起作用

1 个答案: