Jak stworzyć ukryty div, który nie tworzy podziału linii ani przestrzeni poziomej?

354

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?

leora
źródło
Czy jest jakiś użytek dla takiego diva?
Jonno_FTW
6
@Jonno: Jest powszechnie używany w AJAX. Załóżmy, że masz listę elementów z trójkątami ujawnienia. Chcesz, aby szczegóły lub poddrzewo pojawiały się, gdy użytkownik kliknie trójkąt ujawnienia. Więc umieść <div id = "theID" style = "display: none;"> tam, gdzie powinny iść szczegóły. Następnie, gdy użytkownik kliknie trójkąt, przesuwasz go do pozycji „w połowie” (wskazując na południowy wschód) i odpalasz żądanie AJAX, aby wypełnić <div>. Po zakończeniu żądania AJAX przekręcasz trójkąt na południe i usuwasz „display: none;” ze stylu <div>. Biblioteka script.aculo.us robi to bardzo często.
Mike DeSimone

Odpowiedzi:

715

Posługiwać się display:none;

<div id="divCheckbox" style="display: none;">
  • visibility: hidden ukrywa element, ale nadal zajmuje miejsce w układzie.

  • display: none usuwa element całkowicie z dokumentu, nie zajmuje miejsca.

CMS
źródło
42
aby ponownie pokazać div (na wypadek, gdyby ktoś tego potrzebował) -<div id="divCheckbox" style="display: inline-block;">
anujin
14
@anujin: Dlaczego inline-block? Domyślna displaywartość div to block!
MMM
Czy istnieje sposób, aby zrobić coś przeciwnego? Czy zmienić div z display: nonena display: inline-blocklub równoważny bez wyświetlanego teraz div zajmującego miejsce i przenoszącego moje inne elementy DOM?
bpromas
1
warto zaktualizować odpowiedź, uwzględniając globalny atrybut HTML ukryty, który jest dostępny od wersji HTML5.1, co w zasadzie jest tym samym, co powiedzenie, display: nonechoć prosto z HTML. Jednak każde użycie tej displaywłaściwości zastępuje zachowanie hiddenatrybutu globalnego.
Marius Mucenicu
54

Od czasu wydania HTML5 można teraz po prostu:

<div hidden>This div is hidden</div>

Uwaga: To nie jest obsługiwane przez niektóre stare przeglądarki, w szczególności IE <11.

Dokumentacja ukrytego atrybutu ( MDN , W3C )

C_B
źródło
1
Jest to bardziej semantycznie poprawne niż ukrywanie się w CSS, jest lepsze pod względem dostępności i jest obsługiwane przez wszystkie główne przeglądarki. Powinna to być odpowiedź zaakceptowana w 2020 r.
Robin Métral
29

Zastosowanie style="display: none;". Ponadto prawdopodobnie nie musisz mieć DIV, po prostu ustawienie stylu display: nonena polu wyboru prawdopodobnie byłoby wystarczające.

tvanfosson
źródło
Muszę ukryć mój komunikat ostrzegawczy przy ładowaniu strony i chciałem go wyświetlić ponownie po kliknięciu przycisku. Próbowałem, visibility: hiddenale pokazywał pustą przestrzeń. style="display: none;"działało jak mały urok :)
sohaiby
8

Oprócz odpowiedzi CMS możesz rozważyć umieszczenie stylu w zewnętrznym arkuszu stylów i przypisanie stylu do identyfikatora:

#divCheckbox {
display: none;
}
Zeta Two
źródło
+1, to naprawdę dobra sugestia, ale jak wyświetlić tylko jedno pole wyboru bez wpływu na widoczność wszystkich innych pól wyboru?
Owais Qureshi
1
@dotNetSoldier Stare pytanie, ale tutaj powinna znajdować się odpowiedź. Masz klasę css o nazwie invis i dodajesz / usuwasz ją z pola wyboru lub div przez id za pomocą JS.
DanielST
8

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:

.hidden {
visibility: hidden;
display: none;
}

lub dla minimalisty:

.hidden {
display: none;
}

Teraz możesz po prostu zastosować go za pomocą:

<div class="hidden"> content </div>
Dave
źródło
w ten sposób kod wygląda na znacznie czystszy! Wolę klasę niż styl inline
Harry Cho
5

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.

Bogaty Churcher
źródło
4

Pokaż / ukryj za pomocą kliknięcia myszy:

<script language="javascript">

    function toggle() {

        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");

        if (ele.style.display == "block") {

            ele.style.display = "none";
            text.innerHTML = "show";
        }
        else {

            ele.style.display = "block";
            text.innerHTML = "hide";
        }
    }
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here

<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

Źródło: tutaj

Mahdi Jazini
źródło
4

Aby zapobiec zajmowaniu miejsca przez pole wyboru bez usuwania go z DOM, użyj hidden.

<div hidden id="divCheckbox">

Aby nie dopuścić do wyboru z podjęciem jakiegokolwiek miejsca i również usunięcie go z DOM użytku display: none.

<div id="divCheckbox" style="display:none">
smac89
źródło
3

Aby ukryć element wizualnie , ale zachować go w html, możesz użyć:

<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
  [content]
</div>

lub

<div style='visibility:hidden; overflow:hidden; position:absolute;'>
  [content]
</div>

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.

THN
źródło
0

display: none;

To powinno sprawić, że element zniknie i nie zajmie żadnej przestrzeni.

Jose Luis Rasmussen Garcia
źródło
Dziękuję osobom, które skomentowały format mojej odpowiedzi.
Jose Luis Rasmussen Garcia