在下拉列表中引入水平滚动？

Question

我有一个选择下拉列表，其中可能包含长数据值。我想在选择框中引入水平滚动，但不确定是否可行。无论如何，我可以为选项元素引入水平滚动。我想使选项元素的宽度与选择框相同。

<select >
  <option > [TESTLONGDATA]</option>
  <option value="ShorttData">ShorttData</option>
  <option value="Long Data">Long Data</option>
  <option value="Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data ">Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data </option>
</select>

http://i.stack.imgur.com/lbfFL.png

Answer 1

       <select style="overflow:auto;max-width:50px;" >
          <option value="option1" > [TESTLONGDATA]</option>
            <option value="ShorttData">ShorttData</option>
           <option value="Long Data">Long Data</option>
           <option value="Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data ">Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data Sample Long Data                           </option>
      </select>

希望以上代码对您有所帮助。

您可以通过增加最大宽度来增加宽度

Answer 2

您可以在选择中放入class或id，然后添加css class或id。

<select class="selectOption">
  <option > [TESTLONGDATA]</option>
  <option > [TESTLONGDATA]</option>
<select >

然后放入类CSS：

.selectOption { width:150px;} //Or width you want
.selectOption option { width:150px; } //Or width you want

希望这可以帮助您，谢谢！