Html 使用 CSS 隐藏内联 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23675910/
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
Hide inline div using CSS
提问by John29
I have an inline divwhich I need to make hidden by default and then use jQuery's show()and hide()functions on it.
我有一个内联div，我需要在默认情况下隐藏它，然后在它上面使用 jQueryshow()和hide()函数。
I tried this, but it doesn't work:
我试过这个，但它不起作用：
div.mydiv { display: inline none; }
If I remove noneand just use jQuery's hide()function, it works. But this way the elements are not hidden until the page is loaded and JavaScript code is executed.
如果我删除none并仅使用 jQuery 的hide()功能，它就可以工作。但是这样元素在页面加载并执行 JavaScript 代码之前不会隐藏。
EditI have other block elements inside the div, so I can't use span.
编辑我在里面有其他块元素div，所以我不能使用span.
回答by moonwave99
CSS:
CSS：
.mydiv { display: inline; }
.hidden{ display: none; }
HTML:
HTML：
<div class="mydiv hidden"></div>
JS:
JS：
$(function(){
$('.myDiv').removeClass('hidden');
// do your business here
});
回答by Ashif Nataliya
why dont you try inline css with display none? like <div style="display:none;">abc</div>
为什么不尝试使用 display none 的内联 css？喜欢<div style="display:none;">abc</div>
回答by Sebsemillia
Just use display: none;. This way it will be hidden from the beginning and you can show it again via .show()for example.
只需使用display: none;. 这样，它将从一开始就隐藏起来，您可以通过.show()例如再次显示它。
回答by Fix
The display property can't be both inline (which is visible) and none (which is hidden) at the same time.
display 属性不能同时为 inline（可见）和 none（隐藏）。
What happens if you remove the inline, part ?
如果删除 inline, part 会发生什么？
回答by jeoj
Maybe http://jsfiddle.net/Y5ddh/will work?
也许http://jsfiddle.net/Y5ddh/会起作用？
CSS:
CSS：
.hidden {
visibility: hidden;
}
.inline {
display: inline;
background: red;
}
HTML:
HTML：
<div class="hidden inline">
<p>Lorem ipsum</p>
</div>
<div class="inline">
<p>Lorem ipsum</p>
</div>
<button type="button" onclick="toggle()">Toggle</button> <!-- for demo -->
The first div is hidden, but still takes its space as an inline element. Is that what you wanted?
第一个 div 是隐藏的，但仍将其空间作为内联元素。那是你想要的吗？
JS:
JS：
function toggle() {
var hidden = document.getElementById("hidden");
if(hidden.getAttribute("class") == "hidden inline")
hidden.setAttribute("class", "inline");
else
hidden.setAttribute("class", "hidden inline");
}
回答by Travis Knight
It would be a lot easier just to code up in the function used to display / not display this div tag a section which alters the display variable from inline to none, and vice versa.
仅在用于显示/不显示此 div 标签的函数中编写代码会容易得多，该部分将显示变量从内联更改为无，反之亦然。
You can not have both inline and none set at the same time.
您不能同时设置 inline 和 none。
回答by viion
You've had a fair amount of responses so I am going to put in my 2 cents about what you've had:
您已经收到了相当多的回复，所以我将把我的 2 美分放在您所拥有的内容上：
You should switch your divs to , these are inline by default and will behave how you would expect with the .show() and .hide() functions. If you really must keep div then you could float them, but this changes how layout is done and you will have to expect this.
您应该将您的 div 切换到 ，这些默认情况下是内联的，并且会按照您对 .show() 和 .hide() 函数的预期表现。如果你真的必须保留 div 那么你可以浮动它们，但这会改变布局的完成方式，你将不得不期待这一点。
<style>
span.myspan { display: none }
</style>
<span class="myspan">test</span>
<span class="myspan">test</span>
<span class="myspan">test</span>
<script>
$('span.myspan').click(function()
{
$(this).hide();
})
</script>
You cannot assign inline and non to display, they contradict each other.
@moonwave99 is probably best method, you keep consistent with styles, you keep your divs (although you shouldn't, if you want inline, use an inline tag) and you have your show/hide functionality.
@jeoj suggested visibility, visibility takes up space, so if your div is 30x30 px, even if visibility is hidden, it will take up 30x30 of html space, where as hide() / display:none will not, you might not be expecting/wanting this.
@Sebsemillia response is correct, but your div will not be inline as you want, the show() would make it show as block as its a div and that is its default style.
@siraj pathan response is nice but you will have to do the either the same approach or 2 different ones for when you want to hide, making it pretty inconsistent.
@Akie suggests inline, don't do this, inline CSS is not good.
您不能分配内联和非显示，它们相互矛盾。
@moonwave99 可能是最好的方法，您与样式保持一致，保留 div（尽管您不应该，如果您想要内联，请使用内联标签）并且您拥有显示/隐藏功能。
@jeoj 建议可见性，可见性占用空间，所以如果你的 div 是 30x30 像素，即使可见性被隐藏，它也会占用 30x30 的 html 空间，而 hide() / display:none 不会，你可能不会期待/想要这个。
@Sebsemillia 响应是正确的，但您的 div 不会如您所愿地内联，show() 会将其显示为块作为其 div，这是其默认样式。
@siraj pathan 的回复很好，但是当您想隐藏时，您必须使用相同的方法或两种不同的方法，这使得它非常不一致。
@Akie 建议内联，不要这样做，内联 CSS 不好。
回答by siraj pathan
you have written wrong css
你写错了css
css:
css：
div.mydiv { display: none; }
jquery
查询
$('div.mydiv').css('display','inline');
