如何在html中隐藏一个<li>项并且不占用任何space？

Question

我有一个这样的 html 列表：

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

如何隐藏一个 li 项目并使其不占用任何 space？比方说，我需要第一个 li 项（咖啡）不可见，因此结果将只包含茶和牛奶。我用了css（或者style="visibility: hidden"），但是还是占了一些space.

=======

注意：第一个 li 只是一些用于创建其他 li 项的模板。模板 li 是在运行时间生成的，所以我需要隐藏它。我最终在生成其他 li 项目（茶和牛奶）后将其删除，但在我生成茶和牛奶之前，咖啡仍然可见。

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

谢谢。答案是样式="display:none"

Answer 1

在 css 你想要（或一些类似的选择器）

ul > li:first { display: none; }

或者如果您更喜欢直接将 css 定义放在元素本身上

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

另一个常见的做法是简单地创建一个由class应用的样式，如果你想应用这种样式

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

使用 display:none; 将从页面流中删除该元素，因此不会出现使用 visibility: hidden;[=16= 时可能出现的空白 space ]

"Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.

To render an element box's dimensions, yet have its contents be invisible, see the visibility property." display: none ^MDN

Answer 2

改用display:none;。

这使得元素消失并且不占用任何space。

Answer 3

你可以设计它。

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

那应该隐藏元素

Answer 4

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

.hide{
  display:none;  
}

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

Answer 5

就这么写：

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

.groceries {     
list-style: none;     
}

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>

如何在html中隐藏一个<li>项并且不占用任何space？

How to hide a <li> item in html and make it not occupy any space?

html

hidden