web-dev-qa-db-fra.com

Comment créer une div cachée qui ne crée pas de saut de ligne ni d’espace horizontal?

Je veux avoir une case à cocher cachée qui ne prend pas de place sur l'écran.

Si j'ai ceci:

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

Je ne vois pas la case à cocher, mais cela crée quand même une nouvelle ligne.

Si j'ai ceci:

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

il ne crée plus de nouvelle ligne, mais occupe un espace horizontal à l’écran.

Existe-t-il un moyen d'avoir un div caché qui ne prend aucune place (verticale ou horizontale?)

htmlhidden
325
leora

Utilisez display:none;

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

  • visibility: hidden masque l'élément, mais il prend toujours de la place dans la présentation.

  • display: none supprime complètement l'élément du document, il ne prend aucun espace.

673
CMS

Depuis la sortie de HTML5 on peut maintenant faire simplement:

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

Remarque: Ce n'est pas supporté par certains anciens navigateurs, notamment IE <11.

Caché Documentation d'attributs ( MDN , W3C )

46
C_B

Utilisez style="display: none;". En outre, vous n'avez probablement pas besoin de la DIV, il vous suffit de définir le style sur display: none sur la case à cocher.

29
tvanfosson

En plus de la réponse de CMS, vous pouvez envisager de placer le style dans une feuille de style externe et d’affecter le style à l’id, comme ceci:

#divCheckbox {
display: none;
}
8
Zeta Two

Puisque vous devriez vous concentrer sur la convivialité et les généralités dans CSS, plutôt que d'utiliser un id pour pointer sur un élément de mise en page spécifique (ce qui donne des fichiers css énormes ou multiples), vous devriez probablement plutôt utiliser une vraie classe dans votre fichier .css lié:

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

ou pour le minimaliste:

.hidden {
display: none;
}

Maintenant, vous pouvez simplement l'appliquer via:

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

Pensez à utiliser <span> pour isoler les petits segments de balisage à styler sans rompre la présentation. Cela semblerait être plus idiomatique que d'essayer de forcer un <div> à ne pas s'afficher lui-même - si en fait la case à cocher elle-même ne peut pas être stylée comme vous le souhaitez.

5
Rich Churcher

Afficher/masquer par clic de souris: 

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

Source: ici

4
Mahdi Jazini

Pour éviter que la case à cocher ne prenne tout espace sans le supprimer du DOM, utilisez hidden.

<div hidden id="divCheckbox">

Pour empêcher la case à cocher de prendre de la place et de également la supprimer du DOM, utilisez display: none.

<div id="divCheckbox" style="display:none">
4
smac89

Pour masquer l'élément visuellement, mais conservez-le au format HTML, vous pouvez utiliser:

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

ou

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

Quel est le problème avec display:none? Il supprime complètement l'élément du code HTML, de sorte que certaines fonctionnalités peuvent être endommagées si elles doivent accéder à quelque chose de l'élément masqué.

2
THN