web-dev-qa-db-ja.com

表示後にスペースをとるなし

適用すると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;
}

解決策はありますか？

htmlcssnav
12
Anthosiast

#nav-icon内のimgが非表示になっています。ただし、実際の<a>ラップは非表示になりません。 inline-blockに設定されているため、中に何もないときに表示できます。 display:noneを#nav-iconではなく実際の#nav-icon imgに変更すると、問題ありません。

ただし、同じ要素に異なるセレクターを使用してルールを適用しているため、displayルールの競合の問題が発生する可能性があります。 #nav aと#nav-iconは同じものですが、一方が他方を無効にする可能性があります。正しく選択されていることを確認するには、2番目に以前のすべてのセレクター（#nav a#nav-icon）を含める必要があります。

変化する：

#nav-icon img {
    display:none;
}

http://jsfiddle.net/C4YPR/

に：

#nav a#nav-icon {
    display:none;
}

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

15
Andy Mercer