显示无占用空间

Question

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

HTML

<div id="nav">
  <a href="" id="nav-icon"> <img src="navigation.png" alt="nav-menu"</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" alt="twitter-icon" /> </a> </li>
    <li class="navimage"> <a href="facebook.com"> <img src="facebook-icon.png" alt="facebook-icon" /> </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;
}

有什么办法吗？

Answer 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/