显示无空间后占用空间

Question

好像我错过了什么,但我还是想不出来.问题是我申请display: none;了#nav-icon.但它仍占用空间.这是我的编码.

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

你有img里面的#nav-icon隐藏.<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/