webentwicklung-frage-antwort-db.com.de

Wie kann man ein <li> Element in html ausblenden und dafür sorgen, dass es keinen Platz mehr beansprucht?

Ich habe eine HTML-Liste wie diese:

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

Wie kann ich ein li-Element ausblenden und dafür sorgen, dass es keinen Platz einnimmt? Sagen wir, ich brauche den ersten Artikel (Kaffee), um unsichtbar zu sein, so dass das Ergebnis nur Tee und Milch enthält. Ich habe css (oder style = "visible: hidden") verwendet, aber es nimmt immer noch etwas Platz ein.

=======

Hinweis: Das erste Li ist nur eine Vorlage, die zum Erstellen der anderen Li-Elemente verwendet wird. Das Template li wird während der Laufzeit generiert, deshalb muss ich es ausblenden. Ich entferne es irgendwann nachdem ich die anderen Li-Elemente (Tee und Milch) erzeugt habe, aber bevor ich Tee und Milch bekomme, ist Kaffee noch sichtbar.

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

Vielen Dank. Antwort ist style = "display: none"

11
Simo

Erstellen Sie eine Klasse und wenden Sie sie auf Elemente an, die Sie ausblenden möchten. Sie können dies tun, wenn Sie Markup generieren oder die Klasse zu jedem Element hinzufügen, indem Sie einen Selektor wie Jquery verwenden

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

10
Vu Nguyen

In CSS möchten Sie (oder eine ähnliche Auswahl)

ul > li:first { display: none; }

Oder wenn Sie die CSS-Definition direkt auf dem Element selbst platzieren möchten

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

Eine andere gängige Praxis ist, einfach einen von einer Klasse angewendeten Stil zu erstellen, wenn Sie diesen Stil anwenden möchten

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

Wenn Sie display:none; verwenden, wird das Element aus dem Seitenfluss entfernt. Infolgedessen gibt es keinen leeren Platz, wie er bei der Verwendung von visibility: hidden; auftreten kann.

"Deaktiviert die Anzeige eines Elements (hat keine Auswirkung auf das Layout); die Anzeige aller untergeordneten Elemente ist ebenfalls deaktiviert. Das Dokument wird so gerendert, als wäre das Element nicht vorhanden.

Informationen zum Rendern der Dimensionen einer Elementbox, deren Inhalt jedoch unsichtbar ist, finden Sie in der Sichtbarkeitseigenschaft. " display: none MDN

4
Travis J

Verwenden Sie stattdessen display:none;.

Dadurch verschwindet das Element und nimmt keinen Platz ein.

2
HaukurHaf

Du könntest es gestalten.

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

Das sollte das Element verbergen

1
Jared

Schreib einfach das hier: 

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

.groceries {     
list-style: none;     
}