选择框html水平滚动 [英] Select box html horizontal scroll

问题描述

我想使用选择框，溢出时会在选择框中显示滚动

css

  #selectbox {
 width：100％; 
 overflow：scroll; 
} 
  

HTML

 < div style =width：140px;> 
< select name =selectboxsize =5id =selectbox> 
< option value =1>一个两三四五六六< / option> 
< option value =2>七个八< / option> 
< option value =3>九个十< / option> 
< option value =1>一个两三四五六六< / option> 
< option value =2>七个八< / option> 
< option value =3>九十< / option> 
< option value =1>一个两三四五六六< / option> 
< option value =2>七个八< / option> 
< option value =3>九十< / option> 
< option value =1>一个两三四五六六< / option> 
< option value =2>七个八< / option> 
< option value =3>九十< / option> 
< / select> 
< / div> 
  

但只显示垂直滚动。如何解决这个问题？

<当你尝试这些div技巧（和你有奇怪的双垂直滚动），至少在Firefox中，我搜索的所有其他答案不能完全隐藏嵌入垂直滚动条。所以我做了一个，这是工作，你可以有垂直和horizo​​ntad滚动条，但我只测试在FF。另一个问题是当你通过按向上和向下移动选择，

  .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：-17pxsize =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>  

I want use select box and when overflow then show scroll in select box

css

#selectbox{
 width:100%;
 overflow: scroll;
 }

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?

解决方案

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.

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

这篇关于选择框html水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！