次のようなHTMLリストがあります。
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Liアイテムを非表示にして、スペースを占有しないようにするにはどうすればよいですか?たとえば、最初のliアイテム(コーヒー)を非表示にする必要があるため、結果には茶と牛乳のみが含まれます。私はcss(またはstyle = "visibility:hidden")を使用しましたが、それでもまだスペースを占有しています。
=======
注:最初のliは、他のliアイテムを作成するために使用される単なるテンプレートです。テンプレートliは実行時に生成されるため、非表示にする必要があります。他のliアイテム(茶と牛乳)を生成した後、最終的に削除しますが、茶と牛乳を生成する前に、コーヒーはまだ表示されます。
============
ありがとう。答えはstyle = "display:none"
クラスを作成し、非表示にする要素に適用します。 jqueryなどのセレクターを使用して、マークアップを生成するか、各要素にクラスを追加するときに実行できます
.hide{
display:none;
}
<ul>
<li class="hide">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
希望するcss(または同様のセレクター)
ul > li:first { display: none; }
または、要素自体にcss定義を直接配置する場合
<ul>
<li style="display:none;">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
別の一般的な方法は、このスタイルを適用する場合、クラスによって適用されるスタイルを単純に作成することです
<style> .nodisplay { display: none; } </style>
<ul>
<li class="nodisplay">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
display:none;
を使用すると、ページのフローから要素が削除されます。その結果、visibility: hidden;
を使用した場合に発生する可能性のある空白スペースはなくなります。
「要素の表示をオフにします(レイアウトに影響しません)。すべての子孫要素の表示もオフにします。ドキュメントは、要素が存在しないかのようにレンダリングされます。
要素ボックスの寸法をレンダリングし、その内容を非表示にするには、可視性プロパティを参照してください。 " display:none MDN
つかいます display:none;
代わりに。
これにより、要素が消えてスペースを占有しなくなります。
スタイルを設定できます。
...
<li style="display:none;">
....
それは要素を隠すはずです
これを書いてください:
<ul class="groceries">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
.groceries {
list-style: none;
}