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

Question

就像标题所说，有没有办法做到这一点？看下面的图片。横向显示且垂直溢出的标记列表实际上是带有div标记的ul，并且li标记已浮动。我想做类似的事情但是使用<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>

Answer 2

我发现了一种有效的方法 - 我只是使用了顶部示例中的长列表，但是我没有使用带有选项的select标签，而是使用嵌套在li标签中的一系列复选框。

对于一些css工作，结果看起来像这样，我很满意：

noReturn

Answer 3

查看select2插件。这应该具有您想要的多个选择选项。它将多个选项显示为标记。你需要做的只是一些关于如何显示这些标签的css工作，你可以让它看起来完全一样。

插件的链接是： https://select2.github.io/examples.html