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

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?

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.

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 )

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

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

#divCheckbox {
display: none;
}

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>

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.

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

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">

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.

display: none;

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