Html 选择框html水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17250724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select box html horizontal scroll
提问by ZSH
I want use select box and when overflow then show scroll in select box
我想使用选择框，然后在溢出时在选择框中显示滚动
css
css
#selectbox{
width:100%;
overflow: scroll;
}
HTML
HTML
<div style="width:140px;">
<select name="selectbox" size="5" id="selectbox">
<option value="1">one two three four five six</option>
<option value="2">seven eight</option>
<option value="3">nine ten</option>
<option value="1">one two three four five six</option>
<option value="2">seven eight</option>
<option value="3">nine ten</option>
<option value="1">one two three four five six</option>
<option value="2">seven eight</option>
<option value="3">nine ten</option>
<option value="1">one two three four five six</option>
<option value="2">seven eight</option>
<option value="3">nine ten</option>
</select>
</div>
but show just vertical scroll.How can solve this problem?
但只显示垂直滚动。如何解决这个问题？
回答by Aravind
To see these changes quickly:see here
要快速查看这些更改：请参阅此处
These are the changes:
这些是变化：
- First see that I've changed the css from selectbox to that of div.This is because we want to allow scrolling on our div rather than in the selectboxes.
Use
overflow-x:auto; overflow-y:auto;Setting width for div to see the scrolling at work.
- Removed width here, as it conflicts previous definition.
- 首先看到我已经将 css 从选择框更改为 div。这是因为我们希望允许在 div 上滚动而不是在选择框内滚动。
用
overflow-x:auto; overflow-y:auto;设置 div 的宽度以查看工作中的滚动。
- 删除了此处的宽度，因为它与之前的定义相冲突。
To see working demo: see here
要查看工作演示：请参见此处
回答by coolcoder
All other answers what i searched cant fully hide embedded vertical scrollbar when you try these div tricks (and you got weird double vertical scrollers), at least in Firefox. So i made one, which works, you can have vertical and horizontad scrollbars but i tested only in FF. another issue is what when you move selection by pressing up & down keys and it goes beyond visible area it didnt scroll automatically, so you need to provide your additional JS code to handle that.
当您尝试这些 div 技巧（并且您得到奇怪的双垂直滚动条）时，我搜索的所有其他答案都无法完全隐藏嵌入式垂直滚动条，至少在 Firefox 中是这样。所以我做了一个，它有效，你可以有垂直和水平滚动条，但我只在 FF 中测试过。另一个问题是当您通过按向上和向下键移动选择并且超出可见区域时它不会自动滚动，因此您需要提供额外的 JS 代码来处理它。
.block1 {
max-width: 100px;
max-height: 100px;
overflow:auto;
display: block;
}
.block2 {
display: inline-block;
vertical-align: top;
overflow: hidden;
border-right: 1px solid #a4a4a4;
}<div class="block1">
<div class="block2">
<select multiple style="margin-right:-17px" size="11">
<option>123</option>
<option>1234</option>
<option>12345</option>
<option>123456</option>
<option selected>12345777777777777777777777777777</option>
<option>123458</option>
<option>123459</option>
<option>12345</option>
<option>1234</option>
<option>123</option>
<option>12</option>
</select>
</div>
</div>