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

Question

我有一个像这样的HTML列表：

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

如何隐藏li项目并使其不占用任何空间？让我们说，我需要第一个项目（咖啡）是不可见的，所以结果只包含茶和牛奶。我使用了css（或style =＆＃34; visibility：hidden＆＃34;），但它仍然占用了一些空间。

=======

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

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

感谢。答案是style =＆＃34; display：none＆＃34;

Answer 1

创建一个类并将其应用于您要隐藏的元素。您可以在生成标记时使用选择器（如jquery

）将类添加到每个元素

＆＃13;

＆＃13;

.hide{
  display:none;  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;

时不会出现空格

  

＆＃34;关闭元素的显示（它对布局没有影响）;所有后代元素也都关闭了它们的显示。该文档呈现为好像该元素不存在。

     

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

Answer 3

改为使用display:none;。

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

Answer 4

你可以设计它。

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

那应隐藏元素

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>