我有一個多選字段，其中有很多選項，我想將它們顯示為小塊，而不是顯示一長串項目。我可以透過將「選項」設為「display: inline-block」來做到這一點，但是我遇到一個問題，即選項在到達容器邊界時不會進入第二行，而是隱藏在容器後面。
正如您在這裡看到的，我們切斷了最後一個項目，並且以下所有項目都不可見。
.column-select { width: 100%; } .column-select option { display: inline-block; padding: 5px 10px; border-radius: 5px; background: #2b3035; color: #FFFFFF; margin: 5px; outline: none; }
有沒有辦法讓選項傳遞到第二行而不是傳遞到容器後面？
透過賦予容器樣式
display: flex和flex-wrap:wrap;，選項在達到容器寬度時將自動換行到下一行限制。以下是更新後的 CSS 程式碼：
.column-select { width: 100%; display: flex; flex-wrap: wrap; } .column-select option { display: inline-block; padding: 5px 10px; border-radius: 5px; background: #2b3035; color: #FFFFFF; margin: 5px; outline: none; }似乎不可能用 select 元素來做到這一點。我將字段結構從“select>options”更改為“ul>li>checkbox”，這樣我就可以按照自己想要的方式設定框以及每個
li的樣式。使用“appearence: none”隱藏複選框後，結果與選取的結果相同。