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

【问题标题】：How to hide a <li> item in html and make it not occupy any space?如何在 html 中隐藏 <li> 项并使其不占用任何空间？
【发布时间】：2015-09-24 21:54:42
【问题描述】：

我有一个这样的 html 列表：

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

如何隐藏 li 项目并使其不占用任何空间？比方说，我需要第一个 li 项目（咖啡）是不可见的，所以结果将只包含 Tea 和 Milk。我使用了 css（或 style="visibility: hidden"），但它仍然占用了一些空间。

=======

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

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

谢谢。答案是 style="display:none"

【问题讨论】：

标签： html hidden

【解决方案1】：

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

.hide{
  display:none;  
}

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

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

请改用display:none;。

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

【讨论】：

【解决方案4】：

你可以设计它。

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

应该隐藏元素

【讨论】：

【解决方案5】：

就这么写吧：

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

.groceries {     
list-style: none;     
}

【讨论】：

【解决方案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>

【讨论】：