代码之家 › 专栏 › 技术社区 › Simo

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

hidden html

Simo · 技术社区 · 10 年前

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

6 回复 | 直到 10 年前

Vu Nguyen 10 年前

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

.hide{
  display:none;  
}

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

Community Mohan Dere 6 年前

在你想要的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

HaukurHaf 10 年前

使用 display:none; 相反

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

Coder-guy 10 年前

你可以设计它。

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

应该隐藏元素

Red Shark 7 年前

只需写下:

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

.groceries {     
list-style: none;     
}

Rohan Shenoy 5 年前

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