Menggayakan medan dan pilihan pilihan
P粉924915787
P粉924915787 2023-09-08 11:28:13
0
2
468

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?

P粉924915787
P粉924915787

membalas semua(2)
P粉545956597

Dengan memberi bekas gaya display: flexflex-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;
}
P粉226667290

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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan