同时使用display:none和inline-block两种属性的含义是什么？

Question

我想在div元素中使用"display:inline-block"，同时使用"display:none"使其不可见。这样做可以吗？

div {display:inline-block;display:none;}

- user3073240

---

是的，尽管使用 display: inline-block 不会产生任何效果，但由于它被设置为 display: none，因此忽略了在该元素上设置的任何 DOM 规则。如果你想让 <div> 仍然对 DOM 产生影响，尽管它被隐藏了，请使用 visibility: hidden;。 - MackieeE

你想用jQuery来改变它吗？ - Acelasi Eu

请查看我的答案，我添加了一个 jsfiddle。如果您想要切换（例如，使其可见，然后再次隐藏），请回复，我将制作一个工作示例。 - Acelasi Eu

@Acelasi 长期以来一直在寻找如何做到这一点) - user3073240

@user3073240 这里是更新后的 jsfiddle，还加入了切换功能（这样你可以通过链接再次隐藏它）。 - Acelasi Eu

Answer 1

不可能实现。因为将使用 display 属性的最后一个值。

我认为您想要以行内方式显示 div，但同时隐藏它，是吗？那么：

div { 
    display:inline-block;
    visibility: hidden;
}

- user2768948

---

注意：使用此 CSS 时，应使用 $('div').css('visibility', 'visible'); 替代 $('div').show(); ... 另一种解决方案：设置 CSS 为 display:inline-block;，然后使用 Jquery 的 hide() 方法隐藏 div。 - Avatar

Answer 2

编辑：带有切换按钮的可用jsfiddle链接：jsfiddle.net/7seWm/2

可用jsfiddle链接：http://jsfiddle.net/7seWm/

如果您想使用jquery更改它，请使用以下内容：

css：

div {display:none;}

jQuery：

$("#divid").css("display", "inline-block");

- Acelasi Eu

Answer 3

你可以使用一个隐藏类来控制可见性，像这样：

Css

div {display:inline-block;}
.hide{display:none;}

Html

<div>inline</div>
<div class="hide">hide</div>

Javascript:

 div.classList.add('hide');
 div.classList.remove('hide');

http://jsfiddle.net/9zmGu/1/

- Andrew

Answer 4

如果您想隐藏它，但是它还占用空间，请使用您的显示规则和visibility:hidden。

- n1kkou