2

何らかの理由で div の 1 つで問題が発生していますが、firefox または chrome で要素を検査すると、nav タグがその中にネストされているにもかかわらず、div は完全に独立しているように見えます。

<div class="nav">  
  <nav class="social">
    <ul>
      <li><a href="#"><img class="icon" src="assets/facebook.png" alt=""></a></li>
      <li><a href="#"><img class="icon" src="assets/google.png" alt=""></a></li>
      <li><a href="#"><img class="icon" src="assets/linkedin.png" alt=""></a></li>
      <li><a href="#"><img class="icon" src="assets/twitter.png" alt=""></a></li>
      <li><a href="#"><img class="icon" src="assets/wordpress.png" alt=""></a></li>
    </ul>
  </nav>
  <!-- @include _nav -->
</div>

多分これはcssスタイリングと関係があるので、ここにもcssがあります。Hammer for Mac と何か関係があるのではないかと感じていますが、他の点ではうまくいくようです。

.head {
padding-top: 25px;
overflow: hidden;
padding-bottom: 10px;
// background-color: yellow;
}

h1 {
margin: auto;
text-align: center;
color:white;
font-family: sans-serif;
font-size: 35px;
text-shadow: 0 1px 0 #ccc, 
           0 2px 0 #c9c9c9,
           0 3px 0 #bbb,
           0 4px 0 #b9b9b9,
           0 5px 0 #aaa,
           0 6px 1px rgba(0,0,0,.1),
           0 0 5px rgba(0,0,0,.1),
           0 1px 3px rgba(0,0,0,.3),
           0 3px 5px rgba(0,0,0,.2),
           0 5px 10px rgba(0,0,0,.25),
           0 10px 10px rgba(0,0,0,.2),
           0 20px 20px rgba(0,0,0,.15);
padding-bottom: 10px
}

.banner {
height: 200px;
background-color: red;
float: left;
margin: 0px;

}

.callout {
height: 200px;
background-color: green;
float: right;
margin-left: 5px;
margin-right: 0px;
}

.nav {
padding-bottom: 10px;
}

.headnav {
padding-top: 10px;
float: left;
overflow: hidden;
}

nav li {
display: inline;
padding-right: 15px;
}

nav li:last-child {
padding-right: 0px;
}

nav li a {
text-decoration: none;
color: white;
clear: both;
font-size: 20px;
padding-bottom: 4px;
}

nav li a:hover {
color: gray;
}

.icon {
width: 45px;
height: auto;
}

.social {
float: right;
overflow: hidden;
}

.social li {
display: inline;
}

前もって感謝します。

4

1 に答える 1

8

div 要素 (紛らわしい「nav」という名前) 内に含まれる両方の nav 要素 ( social/ headnav) が右と左にフロートされるため、これらは通常のドキュメント フローから削除され (詳細についてはMozilla Developer Networkを参照)、したがって div が勝ちました。開発者ツールで調べたときに、「ラップアラウンド」したり、要素を含んでいるようには見えません。

ただし、これらの要素は、ドキュメント オブジェクト モデル (DOM) の div の子のままです。

通常、フローティングされた子のみを含む要素の高さは 1 ピクセルですが、この場合は、適用したパディングにより 10 ピクセルになります。この動作は、レイアウトの定義に関して問題を引き起こす可能性があります。たとえば、親の下のマージンや、背景パターン、色、境界線などのスタイル設定です。

ただし、これは完全に正常な動作であり、間違ったことではありません。

親要素領域がフロートされた子の影響を受けるようにフロートをクリアするには、いくつかの解決策があります。

  1. フローティング要素の後に別の要素を追加するstyle="clear: both";

    <br style="clear: both;" />

  2. overflow: hidden親コンテナにスタイルを追加します。

  3. CSS トリックにリストされている clearfix メソッドの 1 つを使用する

于 2013-05-12T20:36:16.023 に答える