Hoe maak je een verborgen div die geen regeleinde of horizontale spatie maakt?

Ik wil een verborgen selectievakje hebben dat geen ruimte op het scherm in beslag neemt.

Als ik dit heb:

<div id="divCheckbox" style="visibility: hidden">

Ik zie het selectievakje niet, maar er wordt nog steeds een nieuwe regel gemaakt.

Als ik dit heb:

<div id="divCheckbox" style="visibility: hidden; display:inline;">

het maakt niet langer een nieuwe regel, maar het neemt horizontale ruimte in op het scherm.

Is er een manier om een verborgen div te hebben die geen ruimte in beslag neemt (verticaal of horizontaal?

Antwoord 1, autoriteit 100%

Gebruik display:none;

<div id="divCheckbox" style="display: none;">

• visibility: hiddenverbergt het element, maar het neemt nog steeds ruimte in beslag in de lay-out.

• display: noneverwijdert het element volledig uit het document, het neemt geen ruimte in beslag.

Antwoord 2, autoriteit 9%

Sinds de release van HTML5kan men nu eenvoudig het volgende doen:

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

Opmerking:dit wordt niet ondersteunddoor sommige oude browsers , met name IE < 11.

Verborgenattribuutdocumentatie (MDN ,W3C)

Antwoord 3, autoriteit 4%

Gebruik style="display: none;". U hebt waarschijnlijk ook geen DIV nodig, alleen de stijl instellen op display: nonein het selectievakje zou waarschijnlijk voldoende zijn.

Antwoord 4

Omdat je je moet concentreren op bruikbaarheid en algemeenheden in CSS, in plaats van een id te gebruiken om naar een specifiek lay-outelement te verwijzen (wat resulteert in enorme of meerdere CSS-bestanden), zou je in plaats daarvan waarschijnlijk een echte klasse moeten gebruiken in je gekoppelde .css-bestand :

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

of voor de minimalist:

.hidden {
display: none;
}

Je kunt het nu eenvoudig toepassen via:

<div class="hidden"> content </div>

Antwoord 5

Naast het antwoord van het CMS kunt u overwegen de stijl in een externe stylesheet te plaatsen en de stijl als volgt aan de id toe te wijzen:

#divCheckbox {
display: none;
}

Antwoord 6

Overweeg om <span>te gebruiken om kleine segmenten van opmaak te isoleren zonder de lay-out te verbreken. Dit lijkt meer idiomatisch dan proberen een <div>te dwingen zichzelf niet weer te geven – als het selectievakje zelf in feite niet op de gewenste manier kan worden gestileerd.

7

show / hide by mouse click:

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

Bron: hier

8

Om het element visueel te verbergen, maar houd deze in de HTML, u kunt gebruiken:

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

of

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

Wat kan fout gaan met display:none? Het verwijdert het element volledig uit de HTML, dus sommige functionaliteiten kunnen worden verbroken als ze toegang moeten krijgen tot iets in het verborgen element.

9

display: none;