如何在IE中的选择框中获取水平滚动条?

时间:2011-10-27 14:54:49

标签: html css internet-explorer drop-down-menu scrollbar

我尝试实现以下代码

<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>

缺少第四个选项菜单的右侧部分,任何人都可以告诉我在IE中使水平滚动工作,如果没有,是否还有其他方法可以让它工作,谢谢!

抱歉有任何困惑,我想要的是下拉框中的水平滚动条,我希望它固定宽度为100px;但我想显示整个内容,我假设用户可以向右滚动,如果他们想在下拉选择框中看到整个句子,

2 个答案:

答案 0 :(得分:4)

我不确定你想要实现的目标。这只是一个select列表。只需删除您的样式,它就会根据您的内容自动调整大小。

修改

使包含列表的容器滚动。注意:这个问题的可用性有点值得怀疑,所以我会在页面上实现类似的东西之前寻找另一个解决方案。

<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;
}

答案 1 :(得分:3)

尝试使用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'>&nbsp</div>
</div>

<script>
    $('#divv').css('width', $('#mySelect').outerWidth());
    $('#mySelect').css('width', $('#test').outerWidth());
    $( "#test" ).scroll(function() {
        $('#mySelect').css('width', $(this).outerWidth() + $(this).scrollLeft());
    });
</script>