web-dev-qa-db-ja.com

HTMLで<li>アイテムを非表示にして、スペースを占有しないようにする方法は？

次のような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"

htmlhidden
14
Simo

クラスを作成し、非表示にする要素に適用します。 jqueryなどのセレクターを使用して、マークアップを生成するか、各要素にクラスを追加するときに実行できます

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

希望する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

4
Travis J

つかいます display:none;代わりに。

これにより、要素が消えてスペースを占有しなくなります。

2
HaukurHaf

スタイルを設定できます。

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

それは要素を隠すはずです

1
Jared

これを書いてください：

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

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