web-dev-qa-db-fra.com

Comment masquer un élément <li> en html et le faire n'occuper aucun espace?

J'ai une liste HTML comme ceci:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Comment puis-je masquer un article de li et le faire n'occuper aucun espace? Disons que j'ai besoin que le premier article de li (café) soit invisible, pour que le résultat ne contienne que du thé et du lait. J'ai utilisé css (ou style = "Visibilité: masqué"), mais il occupe toujours un peu d'espace.

=======

Remarque: le premier li est juste un modèle utilisé pour créer les autres éléments li. Le modèle li est généré pendant l'exécution et c'est pourquoi je dois le cacher. Je l'enlève éventuellement après avoir généré les autres articles li (thé et lait), mais avant de générer thé et lait, le café est toujours visible.

============

Merci. La réponse est style = "display: none"

htmlhidden
11
Simo

Créez une classe et appliquez-la aux éléments que vous souhaitez masquer. Vous pouvez le faire lorsque vous générez un balisage ou ajoutez la classe à chaque élément à l'aide d'un sélecteur, comme jquery.

.hide{
  display:none;  
}
<ul>
  <li class="hide">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

10
Vu Nguyen

En css vous voulez (ou un sélecteur similaire)

ul > li:first { display: none; }

Ou si vous préférez placer directement la définition CSS sur l'élément lui-même

<ul>
 <li style="display:none;">Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ul>

Une autre pratique courante consiste simplement à créer un style appliqué par une classe si vous souhaitez appliquer ce style.

<style> .nodisplay { display: none; } </style>
<ul>
 <li class="nodisplay">Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ul>

Utiliser display:none; enlèvera l'élément du flux de la page et, par conséquent, il n'y aura plus d'espace vide comme cela peut être le cas avec l'utilisation de visibility: hidden;

"Désactive l'affichage d'un élément (cela n'a aucun effet sur la présentation); l'affichage de tous les éléments descendants est également désactivé. Le document est rendu comme si l'élément n'existait pas.

Pour rendre les dimensions d'une boîte d'élément sans que son contenu soit invisible, voir la propriété de visibilité. " display: none MDN

4
Travis J

Utilisez display:none; à la place.

Cela fait disparaître l'élément et ne prend pas de place.

2
HaukurHaf

Vous pouvez le coiffer.

...
<li style="display:none;">
....

Cela devrait cacher l'élément

1
Jared

Il suffit d'écrire ceci: 

<ul class="groceries">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

.groceries {     
list-style: none;     
}
0
Eirik Andreas Gustavsen