Html 如何在html中隐藏<li>项并使其不占用任何空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32771551/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide a <li> item in html and make it not occupy any space?
提问by Simo
I have an html list like this:
我有一个这样的 html 列表：
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
How can I hide a li item and make it not occupy any space? Let's say, I need the first li item (coffee) to be invisible, so the result will contain only Tea and Milk. I used css (or style="visibility: hidden"), but it still occupies some space.
如何隐藏 li 项目并使其不占用任何空间？比方说，我需要第一个 li 项（咖啡）不可见，所以结果将只包含茶和牛奶。我使用了 css（或 style="visibility: hidden"），但它仍然占用了一些空间。
=======
========
Note: the first li is just some template used to create the other li items. The template li is generated during the run time, and that's why I need to hide it. I remove it eventually after generating the other li items (Tea and Milk), but before I generate Tea and Milk, Coffee is still visible.
注意：第一个 li 只是用于创建其他 li 项目的一些模板。模板 li 是在运行时生成的，这就是我需要隐藏它的原因。我最终在生成其他 li 项目（茶和牛奶）后将其删除，但在生成茶和牛奶之前，咖啡仍然可见。
============
============
Thanks. Answer is style="display:none"
谢谢。答案是 style="display:none"
回答by Vu Nguyen
Create a class and apply it to elements which you wish to hide. You can do it when you generate markup or add the class to each element using a selector, like jquery
创建一个类并将其应用于您希望隐藏的元素。您可以在生成标记或使用选择器将类添加到每个元素时执行此操作，例如 jquery
.hide{
display:none;
}<ul>
<li class="hide">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>回答by Travis J
In css you want (or some similar selector)
在你想要的 css 中（或一些类似的选择器）
ul > li:first { display: none; }
Or if you prefer directly placing the css definition on the element itself
或者，如果您更喜欢直接将 css 定义放在元素本身上
<ul>
<li style="display:none;">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Another common practice is to simply create a style applied by a class if you wish to apply this style
另一个常见的做法是简单地创建一个类应用的样式，如果你想应用这个样式
<style> .nodisplay { display: none; } </style>
<ul>
<li class="nodisplay">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Using display:none;will remove the element from the flow of the page, and as a result there will be no blank space as can occur when using visibility: hidden;
使用display:none;将从页面流中删除元素，因此不会出现使用时可能出现的空白空间visibility: hidden;
"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: noneMDN
“关闭元素的显示（它对布局没有影响）；所有后代元素的显示也被关闭。文档呈现为好像该元素不存在一样。
要渲染元素框的尺寸，但使其内容不可见，请参阅可见性属性。” display: none MDN
回答by HaukurHaf
Use display:none;instead.
使用display:none;来代替。
That makes the element disappear and not take up any space.
这使得元素消失而不占用任何空间。
回答by Coder-guy
You could style it.
你可以设计它。
...
<li style="display:none;">
....
That should hide the element
那应该隐藏元素
回答by Eirik Andreas Gustavsen
Just write this:
只写这个：
<ul class="groceries">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
.groceries {
list-style: none;
}
