Menggayakan medan dan pilihan pilihan

Question

Saya mempunyai medan berbilang pilihan dengan banyak pilihan dan saya mahu memaparkannya sebagai ketulan kecil dan bukannya memaparkan senarai item yang panjang. Saya boleh melakukan ini dengan menetapkan "pilihan" kepada "display: inline-block", tetapi saya menghadapi masalah di mana pilihan tidak masuk ke baris kedua apabila ia mencapai sempadan kontena, tetapi tersembunyi di belakang bekas.

Seperti yang anda boleh lihat di sini, kami memotong item terakhir dan semua item berikut tidak kelihatan.

.column-select {
    width: 100%;
}
.column-select option {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    background: #2b3035;
    color: #FFFFFF;
    margin: 5px;
    outline: none;
}

Adakah terdapat cara untuk menghantar pilihan ke baris kedua dan bukannya lulus di belakang bekas?

Answer 1

Dengan memberi bekas gaya display: flex 和 flex-wrap:wrap; , pilihan akan secara automatik membalut ke had baris seterusnya apabila lebar bekas dicapai.

Berikut ialah kod CSS yang dikemas kini:

.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;
}

Answer 2

Nampaknya tidak mungkin untuk melakukan ini dengan elemen pilih. Saya menukar struktur medan daripada "pilih>pilihan" kepada "ul>li>kotak semak" supaya saya boleh menggayakan kotak dan setiap li li seperti yang saya mahu. Selepas menyembunyikan kotak semak menggunakan "penampilan: tiada" hasilnya adalah sama dengan yang dipilih.