显示无占用空间

Posted 2023-04-12

【中文标题】显示无占用空间

【英文标题】：Taking up space after display none

【发布时间】：2014-04-14 00:05:58

【问题描述】：

当我为#nav-icon 元素应用display: none; 时，它仍然占用空间。这是我的代码：

HTML

<div id="nav">
  <a href="" id="nav-icon"> <img src="navigation.png" </a>
  <ul>
    <li> <a href="#"> LINK </a> </li>
    <li> <a href="#"> LINK </a> </li>
    <li> <a href="#"> LINK </a> </li>
    <li class="navimage"> <a href="twitter.com"> <img src="twitter-icon.png"  /> </a> </li>
    <li class="navimage"> <a href="facebook.com"> <img src="facebook-icon.png"  /> </a> </li>
    </ul>
  </div>

CSS

#nav 
    border-bottom:1px solid #FFF;
    margin-bottom:20px;
    padding:0;
    text-align:center;
    max-width:95%;
    margin:0 auto;


#nav li 
    display:inline;


#nav a 
    display:inline-block;
    padding:15px;
    font-weight:bold;
    font-size:15px;
    margin:15px 0;


#nav-icon img 
    display:none;


.navimage 
    float:right;
    margin-top:-5px;

有什么办法吗？

【问题讨论】：

您确定多余的空间不只是在您的#nav a 周围填充吗？

删除 display:inline-block 并且它可以工作jsfiddle.net/Vinay199129/2s54q/1

【参考方案1】：

您在 #nav-icon 中隐藏了 img。但是，您没有隐藏实际的 <a> 包装。因为设置为inline-block，所以里面没有东西的时候可以显示。将display:none 更改为实际的#nav-icon 而不是#nav-icon img，这样就可以了。

您可能会遇到display 规则冲突的问题，因为您在同一元素上应用具有不同选择器的规则。 #nav a 和 #nav-icon 是同一件事，但其中一个可能会否决另一个。为确保您正确选择了它，第二个应该包括所有以前的选择器，即#nav a#nav-icon。

变化：

#nav-icon img 
    display:none;

http://jsfiddle.net/C4YPR/

收件人：

#nav a#nav-icon 
    display:none;

http://jsfiddle.net/C4YPR/1/

【讨论】：

这确实适用于这个问题！也感谢您的解释！ :)