Chcę mieć ukryte pole wyboru, które nie zajmuje miejsca na ekranie.
Jeśli mam to:
<div id="divCheckbox" style="visibility: hidden">
Nie widzę pola wyboru, ale nadal tworzy nową linię.
Jeśli mam to:
<div id="divCheckbox" style="visibility: hidden; display:inline;">
nie tworzy już nowej linii, ale zajmuje poziomą przestrzeń na ekranie.
Czy istnieje sposób, aby ukryty div nie zajmował miejsca (pionowego lub poziomego?
Odpowiedzi:
Posługiwać się
display:none;
visibility: hidden
ukrywa element, ale nadal zajmuje miejsce w układzie.display: none
usuwa element całkowicie z dokumentu, nie zajmuje miejsca.źródło
<div id="divCheckbox" style="display: inline-block;">
inline-block
? Domyślnadisplay
wartość div toblock
!display: none
nadisplay: inline-block
lub równoważny bez wyświetlanego teraz div zajmującego miejsce i przenoszącego moje inne elementy DOM?display: none
choć prosto z HTML. Jednak każde użycie tejdisplay
właściwości zastępuje zachowaniehidden
atrybutu globalnego.Od czasu wydania HTML5 można teraz po prostu:
Uwaga: To nie jest obsługiwane przez niektóre stare przeglądarki, w szczególności IE <11.
Dokumentacja ukrytego atrybutu ( MDN , W3C )
źródło
Zastosowanie
style="display: none;"
. Ponadto prawdopodobnie nie musisz mieć DIV, po prostu ustawienie styludisplay: none
na polu wyboru prawdopodobnie byłoby wystarczające.źródło
visibility: hidden
ale pokazywał pustą przestrzeń.style="display: none;"
działało jak mały urok :)Oprócz odpowiedzi CMS możesz rozważyć umieszczenie stylu w zewnętrznym arkuszu stylów i przypisanie stylu do identyfikatora:
źródło
Ponieważ powinieneś skupić się na użyteczności i ogólności w CSS, zamiast używać identyfikatora w celu wskazania określonego elementu układu (co powoduje powstanie ogromnych lub wielu plików css), prawdopodobnie zamiast tego powinieneś użyć prawdziwej klasy w połączonym pliku .css:
lub dla minimalisty:
Teraz możesz po prostu zastosować go za pomocą:
źródło
Rozważ użycie
<span>
izolowania małych segmentów znaczników do stylizacji bez rozbijania układu. Wydawałoby się to bardziej idiomatyczne niż próba wymuszenia, aby<div>
nie wyświetlał się sam - jeśli w rzeczywistości samo pole wyboru nie może być tak zaprojektowane, jak chcesz.źródło
Pokaż / ukryj za pomocą kliknięcia myszy:
Źródło: tutaj
źródło
Aby zapobiec zajmowaniu miejsca przez pole wyboru bez usuwania go z DOM, użyj
hidden
.Aby nie dopuścić do wyboru z podjęciem jakiegokolwiek miejsca i również usunięcie go z DOM użytku
display: none
.źródło
Aby ukryć element wizualnie , ale zachować go w html, możesz użyć:
lub
Co może pójść nie tak
display:none
? Usuwa element całkowicie z html, więc niektóre funkcje mogą zostać uszkodzone, jeśli będą potrzebować dostępu do czegoś w ukrytym elemencie.źródło
To powinno sprawić, że element zniknie i nie zajmie żadnej przestrzeni.
źródło