Mengapa apabila menjajarkan elemen butang secara menegak dalam div, elemen tersebut mempunyai lebih banyak ruang menegak daripada yang ditakrifkan oleh jidar CSS?
P粉080643975
P粉080643975 2023-09-14 18:49:41
0
2
469

Halaman kerja saya sedang berjalan ada di tapak ini

Saya fikir bahagian paling sukar halaman ini ialah skrip dan gaya yang digunakan untuk menapis hasil, tetapi sebenarnya bahagian penapisan berfungsi seperti yang diharapkan, ia hanya isu penggayaan/penjajaran yang mengelirukan saya

Bahagian yang saya hadapi masalah ialah kandungan utama div myBtnContainer - di bawah anda boleh melihat blok kelabu untuk menyusun keputusan, SEMUA, SEMASA, AKUSTIK dll

Seperti yang anda boleh lihat, mana-mana butang dengan dua baris teks (pembungkusan perkataan) akan mencipta ruang putih tambahan di atas butang itu sendiri - anda akan melihat bahawa PERUBAHAN WARNA ialah butang pertama di mana ini berlaku - ini bukan sahaja akan mengubah butang Menekan ke bawah juga akan menolak titik permulaan baris seterusnya ke bawah

Saya sangat pemula di sini - cukup bijak untuk google bahagian yang saya perlukan dan kemudian salin/tampal/edit untuk percubaan dan kesilapan - itu biasanya cukup untuk mengatasinya, tetapi kali ini saya menemui jalan buntu

Sebarang bantuan amatlah dihargai

Saya telah melihat dalam alat pembangun Safari untuk melihat sama ada ia adalah isu padding, dan setakat yang saya tahu ia bukan isunya, tetapi ia mungkin satu-satunya perkara yang boleh saya selesaikan (atau mungkin tidak... )

P粉080643975
P粉080643975

membalas semua (2)
P粉618358260

Boleh guna flex box macam ni

#myBtnContainer {display:flex;flex-wrap: wrap;}

Ini akan menjajarkan item secara menegak secara lalai

    P粉604507867

    Memang, seperti yang @Austin sebutkan, menggunakan flexbox ialah cara anda yang disyorkan. Khususnya, cuma tambah css berikut pada halaman anda:

    #myBtnContainer { display: flex; flex-direction: row; /* optional, because it's the default */ flex-wrap: wrap; }

    Anda boleh belajar tentang flexbox dengan lebih terperinci, ia adalah sistem yang sangat asas dan penting digunakan di laman web. Saya mengesyorkan halaman web berikut:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

      Muat turun terkini
      Lagi>
      kesan web
      Kod sumber laman web
      Bahan laman web
      Templat hujung hadapan
      Tentang kita Penafian Sitemap
      Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!