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

创建一个类并将其应用于要隐藏的元素。您可以在生成标记或使用选择器(如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;     
}    

有两种方法可以实现这一点。第一个是使用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>