带有溢出的HTML Div宽度:自动? [英] HTML Div Width with Overflow: Auto?
问题描述
我正在创建一个div，如下所示:
I'm creating a div like the following:
<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>
每个标签的文本不必要地自动换行到下一行.
The text of every label unnecessarily wraps to the next line.
我该如何解决?
推荐答案
尝试1
添加到div，
white-space: nowrap;
问题是出现的垂直滚动条阻碍了内容，从而略微引入了不必要的小水平滚动条.
The problem with this was the vertical scrollbar that appears impedes on the content slightly introducing a small unnecessary horizontal scrollbar.
尝试2
添加到div，
white-space: nowrap;
padding-right: 1.5em; // increase as appropriate
这里的问题是您正在猜测垂直滚动条的大小以删除水平滚动条.
The problem here is that you're guessing the size of the vertical scrollbar to remove the horizontal one.
尝试3
添加到div，
white-space: nowrap;
overflow-x: hidden;
overflow-y: scroll;
现在，水平滚动条被删除，垂直滚动条的大小没有被猜测，但是它始终可见.
Now, the horizontal scrollbar is removed, and the size of the vertical one is not being guessed, but it is always visible.
尝试4
问题似乎归结为需要为滚动条保留空间，就像overflow-y: scroll;一样，但始终不可见.我想到的第一个解决方案是在设置了overflow-y: scroll;和width: 100%;的第一个解决方案旁边添加一个额外的div.问题在于，使用常规div时，滚动条包含在宽度中.经过一番尝试和错误之后，看来如果您使用float并非如此.因此，通过使用额外的float，您可以将容器的宽度强制增大一个滚动条的宽度，然后在原始div上设置width: 100%;，它也会占用额外的空间.您可以通过将其高度设置为0来隐藏多余的浮动.
The problem seems to boil down to needing to reserve the space for a scrollbar, as overflow-y: scroll; does but without it always being visible. The first solution that came to mind was to add an extra div alongside the first that has overflow-y: scroll; set and a width: 100%;. The problem was that with a regular div the scrollbar is included in the width. After some trial and error though, it seems that if you use a float it isn't. So by using an extra float you can force the width of the container to be larger by a scrollbars width, and then setting width: 100%; on the original div, it will take up the extra space too. You hide the extra float by setting it's height to 0.
我不完全确定为什么这对我自己有效，并且我仅在似乎可以正常工作的Firefox5上进行了测试.希望对您有帮助.所以，
N.B. I'm not entirely sure why this works myself, and I've only tested on Firefox5 where it seems to work. I hope it's helpful for you. So,
添加
<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;
}
这篇关于带有溢出的HTML Div宽度:自动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
