如何在HTML中隐藏<li>项目并使其不占用任何空间？

Question

我有一个像这样的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"

- Simo

Answer 1

创建一个类并将其应用于您希望隐藏的元素。您可以在生成标记时执行此操作，也可以使用选择器为每个元素添加类，例如jquery。

.hide{
  display:none;  
}

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

- Vu Nguyen

Answer 2

在 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;时发生。

"关闭元素的显示（对布局没有影响）；所有后代元素也将其显示关闭。文档呈现为该元素不存在。

要呈现元素框的尺寸，但其内容不可见，请参见visibility属性。" display: none ^MDN

- Travis J

Answer 3

请使用display:none;代替。

这将使元素消失并不占用任何空间。

- HaukurHaf

Answer 4

你可以为它添加样式。

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

这将隐藏该元素

- Coder-guy

Answer 5

只需写下这句话：

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

.groceries {     
list-style: none;     
}    

- Red Shark

Answer 6

您可以通过两种方式来实现此目标。第一种方法是使用 CSS 的 display 属性：

Sample.html
<ul>
  <li class="list-hidden-item">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


Sample.css
.list-hidden-item { display: none; }

另一种方法是使用HTML5属性hidden

Sample.html
<ul>
  <li hidden>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

- Rohan Shenoy