Saya ingin memiliki kotak centang tersembunyi yang tidak memakan ruang di layar.
Jika saya punya ini:
<div id="divCheckbox" style="visibility: hidden">
Saya tidak melihat kotak centang, tetapi masih membuat baris baru.
Jika saya punya ini:
<div id="divCheckbox" style="visibility: hidden; display:inline;">
tidak lagi membuat garis baru, tetapi membutuhkan ruang horisontal di layar.
Apakah ada cara untuk memiliki div tersembunyi yang tidak memakan ruang (vertikal atau horizontal?
Jawaban:
Menggunakan
display:none;
visibility: hidden
menyembunyikan elemen, tetapi masih membutuhkan ruang di tata letak.display: none
menghapus elemen sepenuhnya dari dokumen, itu tidak memakan ruang.sumber
<div id="divCheckbox" style="display: inline-block;">
inline-block
? Nilai defaultdisplay
untuk div adalahblock
!display: none
menjadidisplay: inline-block
atau setara tanpa div yang ditampilkan sekarang mengambil ruang dan memindahkan elemen DOM saya yang lain?display: none
meskipun langsung dari HTML. Namun setiap penggunaandisplay
properti menimpa perilakuhidden
atribut global.Sejak rilis HTML5 sekarang dapat dengan mudah dilakukan:
Catatan: Ini tidak didukung oleh beberapa browser lama, terutama IE <11.
Dokumentasi Atribut Tersembunyi ( MDN , W3C )
sumber
Gunakan
style="display: none;"
. Juga, Anda mungkin tidak perlu memiliki DIV, cukup dengan mengatur gayadisplay: none
pada kotak centang mungkin sudah cukup.sumber
visibility: hidden
tetapi itu menunjukkan ruang kosong.style="display: none;"
bekerja seperti pesona kecil :)Selain jawaban CMS, Anda mungkin ingin mempertimbangkan untuk meletakkan style dalam stylesheet eksternal dan menetapkan style ke id, seperti ini:
sumber
Karena Anda harus fokus pada kegunaan dan generalisasi dalam CSS, daripada menggunakan id untuk menunjuk ke elemen tata letak tertentu (yang menghasilkan file css besar atau banyak), Anda mungkin harus menggunakan kelas yang benar dalam file .css yang ditautkan:
atau untuk minimalis:
Sekarang Anda cukup menerapkannya melalui:
sumber
Pertimbangkan
<span>
untuk mengisolasi segmen kecil markup yang akan ditata tanpa merusak tata letak. Ini tampaknya lebih idiomatis daripada memaksakan<div>
tidak untuk menampilkan dirinya sendiri - jika kotak centang itu sendiri tidak dapat ditata seperti yang Anda inginkan.sumber
Tampilkan / sembunyikan dengan klik mouse:
Sumber: Di sini
sumber
Untuk mencegah kotak centang mengambil ruang apa pun tanpa menghapusnya dari DOM, gunakan
hidden
.Untuk mencegah kotak centang mengambil ruang apa pun dan juga menghapusnya dari DOM, gunakan
display: none
.sumber
Untuk menyembunyikan elemen secara visual , tetapi menyimpannya di html, Anda dapat menggunakan:
atau
Apa yang salah
display:none
? Ini menghapus elemen sepenuhnya dari html, sehingga beberapa fungsi mungkin rusak jika mereka perlu mengakses sesuatu di elemen tersembunyi.sumber
Ini harus membuat elemen menghilang dan tidak memakan ruang.
sumber