有沒有辦法將選擇選項水平排列？

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>