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

Question

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

如果有一个图书馆可以做类似的事情或者某种替代方案，那也是可以理解的。

在此先感谢！

Answer 1

我发现了一种可行的方式 - 我只是使用了像上面这个例子那样的长列表，而不是使用带选项的选择标签，而是使用了一个一系列复选框嵌套在li标签中。

有了一些CSS工作的结果看起来是这样的，我高兴：

Answer 2

退房选择2插件。这应该有你想要的多个选择选项。它将多个选项显示为标签。所有你需要做的是一些CSS如何显示这些标签，你可以使它看起来完全相同的方式。

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

Answer 3

在这里是使用几个<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>