Html 如何在IE的选择框中获得水平滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7917824/
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
How to get horizontal scroll bar in select box in IE?
提问by smith
I try to implement the following code
我尝试实现以下代码
<div class="functionitem" id="selector_cat">
<select name="sets" style="overflow:auto;width:100px;">
<option value="general">happy holiday</option>
<option value="garden">Garden</option>
<option value="Lunch">Lunch</option>
<option value="nice day">A nice day out with my friend on the beach</option>
</select>
</div>The right part of the 4th option menu is missing, Can anyone tell me make the horizontal scroll work in the IE, if not, is there any other ways that could get it work, thank you!
第四个选项菜单的右边部分不见了，谁能告诉我在IE中使水平滚动工作，如果没有，有没有其他方法可以使它工作，谢谢！
sorry for any confusion, what i want is that a horizontal scroll bar in the drop down box, I want it fixed width 100px; but I want to display the whole content, I assume user can scroll to the right if they want to see the whole sentence in the drop down select box,
抱歉有任何混淆，我想要的是下拉框中的水平滚动条，我希望它的宽度固定为 100px；但我想显示整个内容，我假设用户可以向右滚动，如果他们想在下拉选择框中看到整个句子，
采纳答案by Jesse
I'm not really sure what you're trying to achieve. This is simply a selectlist. Just remove your styling and it will automatically size to your contents.
我不太确定你想要达到什么目标。这只是一个select列表。只需删除您的样式，它就会根据您的内容自动调整大小。
EDIT
编辑
Make the container that contains the list scroll. Note: the usability of this is somewhat questionable so I would look for another solution prior to implementing something like this on a page.
使包含列表的容器滚动。注意：它的可用性有些问题，所以我会在页面上实现类似的东西之前寻找另一个解决方案。
<div id="selector_cat">
<select name="sets">
<option value="general">happy holiday</option>
<option value="garden">Garden</option>
<option value="Lunch">Lunch</option>
<option value="nice day">A nice day out with my friend on the beach</option>
</select>
</div>
#selector_cat{
width: 100px;
overflow: auto;
}
回答by Cyrus
try it with JQuery:
用 JQuery 试试：
<div id='test' style="overflow-x:scroll; width:120px; overflow: -moz-scrollbars-horizontal;">
<select id='mySelect' name="mySelect" size="5">
<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 id="divv" style='font-size: 1px'> </div>
</div>
<script>
$('#divv').css('width', $('#mySelect').outerWidth());
$('#mySelect').css('width', $('#test').outerWidth());
$( "#test" ).scroll(function() {
$('#mySelect').css('width', $(this).outerWidth() + $(this).scrollLeft());
});
</script>
