带有溢出的 HTML div 宽度：自动？答案

【问题标题】：HTML Div Width with Overflow: Auto?带有溢出的 HTML div 宽度：自动？
【发布时间】：2011-09-27 01:10:30
【问题描述】：

我正在创建一个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>

每个标签的文本都不必要地换行到下一行。

我该如何解决这个问题？

【问题讨论】：

在 div 的末尾加上一对 &nbsp; 来强制它多出几个字符对你来说是一个可行的选择吗？
@George：我确实尝试过，但它不起作用 - 它总是溢出将代替滚动条的字符。
您的标记未通过验证。它应该看起来像 like this。
@NGLN：呃...谢谢，但那有点离题了。而你的不符合我的要求：div 的 width 是 100%，而不是与文本相同。

标签： css html width scrollbar

【解决方案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; 所做的那样，但它始终不可见。想到的第一个解决方案是在第一个设置了overflow-y: scroll; 和width: 100%; 的同时添加一个额外的div。问题在于，对于常规的div，滚动条包含在宽度中。但经过一些试验和错误后，似乎如果您使用float，它不是。因此，通过使用额外的float，您可以强制容器的宽度增大滚动条宽度，然后在原始 div 上设置width: 100%;，它也会占用额外的空间。您可以通过将其高度设置为 0 来隐藏额外的浮动。

注意我不完全确定为什么这对我自己有效，而且我只在 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。

【讨论】：

这太棒了！但是现在底部有一个小滚动条，可以滚动 5 个像素。有什么办法可以让事情变得更大？
@Mehrdad。我仍然认为我错过了重点。我认为这是一个垂直滚动条的问题。这种方法仍然会留下一个水平的。我会再读一遍并继续思考。
不，垂直滚动条是的问题！但是一旦我阻止了空格换行，就会出现一个水平的。
@max：是的，我想要它在那里，但这是包装问题的原因。我希望它在那里，但要在它出现时使框变大，这样它就不会占用文本空间。
@Mehrdad 好吧，自从你问到这个问题以来，我一直在发疯！我确信必须有另一种方式。您现在可能已经决定要使用什么，但我想出了一个新的解决方案。请参阅我的更新（尝试 4）。你可能会认为它比其他的更hacky。但如果它完全有效（！）我认为它适用于未知宽度的滚动条。让我知道你过得怎么样。

【解决方案2】：

据我所知，您只需要垂直滚动条。这应该可以解决问题。

overflow-x: hidden;

【讨论】：

【解决方案3】：

您可以使用overflow-y: scroll; 强制垂直滚动条。

编辑：

好的，我想你想要什么终于清楚了。

看到这个demo fiddle。

CSS：

div {
    overflow: auto;
    max-height: 15em;
    display: inline-block;
}

HTML：

<div>
    <input type="checkbox" id="check" />
    <label for="check">Some text.</label>
</div>

编辑 2：

好的，也许是this is what you want？如果 div 中只有几行，我希望您不要介意额外的填充。

【讨论】：

是的，但我的文本仍然以这种方式换行。我需要将宽度自动调整为文本。
看看this example 看看我的意思......它似乎也不是这样工作的。
@Mehrdad Pffiew。好的，再次更新...... ;-) 我希望你不介意填充，因为只有几行。
我不介意填充本身，但我确实介意您假设滚动条具有一定的宽度。这太骇人听闻了...：\
@Mehrdad 同意，但别无他法。只需从所有浏览器中选择最宽的（可能有一些限制）。替代方案似乎总是强制滚动条。