Question

我正在创建div，如下所示：

编辑：这是一个例子：

<html>
  <body>
    <table>
      <tr>
        <td>
          <div style="position: relative; overflow: auto; max-height: 15em;">
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

每个标签的文字不必要地包裹到下一行。

我该如何解决这个问题？

Answer 1

尝试1

添加到div，

white-space: nowrap;

这个问题是垂直滚动条似乎阻碍了内容略微引入一个小的不必要的水平滚动条。

尝试2

添加到div，

white-space: nowrap;
padding-right: 1.5em;   // increase as appropriate

这里的问题是您猜测垂直滚动条的大小以删除水平滚动条。

尝试3

添加到div，

white-space: nowrap;
overflow-x: hidden; 
overflow-y: scroll;

现在，移除水平滚动条，并且没有猜到垂直滚动条的大小，但是它始终可见。

尝试4

问题似乎归结为需要为滚动条保留空间，正如overflow-y: scroll;所做但没有始终可见。我想到的第一个解决方案是在第一个div设置和overflow-y: scroll;之后添加width: 100%;。问题是，对于常规div，滚动条包含在宽度中。经过一些试验和错误后，似乎如果你使用float则不然。因此，通过使用额外的float，您可以通过滚动条宽度强制容器的宽度，然后在原始div上设置width: 100%;，它也会占用额外的空间。您可以通过将其高度设置为0来隐藏额外的浮动。

N.B。我不完全确定为什么这会自己起作用，而且我只在Firefox5上测试了它似乎工作的地方。我希望它对你有所帮助。所以，

添加，

<div class="hack"></div>

以下是原始div。然后，

.content {
    float: left;
    width: 100%;
    overflow-y: auto;
    max-height: 15em;
}

.hack {
    float: left;
    width: 100%;
    overflow-y: scroll;   
    height: 0;
}

修改jsfiddle including this fix is here。

Answer 2

从我看到的，你只需要垂直滚动条。应该这样做。

overflow-x: hidden;

带有溢出的HTML Div宽度：自动？

编辑：这是一个例子：

3 个答案: