javascript - 有没有办法水平排列选择选项？

Question

正如标题所说，有没有办法做到这一点？看下面的图片。标签列表，水平显示，垂直溢出，实际上是一个div。用ul标签和 li标签 float 。我想做类似的事情，但使用 <select multiple>框，因此用户可以在过滤前选择多个标签。我已经对此进行了一些谷歌搜索，但没有找到太多。

如果有一个库可以做类似的事情或某种替代方法，那也将不胜感激。

提前致谢!

Answer 1

这是一种使用多个 <select multiple> 的方法元素，样式化，使它们看起来都形成一个元素:

div {
display: inline-block;
white-space: nowrap;
overflow: hidden;
border: 1px solid rgb(127,127,127);
}

div select {
display: inline-block;
width: 160px;
padding: 24px 6px;
margin: -12px -36px 12px 12px;
border: none;
}

option {
height: 2em;
}

<div>
<select multiple data-range="options-1-5">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>

<select multiple data-range="options-6-10">
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
<option>Option 10</option>
</select>

<select multiple data-range="options-11-15">
<option>Option 11</option>
<option>Option 12</option>
<option>Option 13</option>
<option>Option 14</option>
<option>Option 15</option>
</select>

<select multiple data-range="options-16-20">
<option>Option 16</option>
<option>Option 17</option>
<option>Option 18</option>
<option>Option 19</option>
<option>Option 20</option>
</select>
</div>