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/

显示无空间后占用空间

1 个答案: