0

誰かがこの奇妙な現象を説明してもらえますか？

http://jsfiddle.net/sPA2V/

何らかの理由で、ボックスフッターの高さは0pxであると考えられているため（フッターのコンテンツを高さとして考慮していません）、境界線が正しく表示されません。これは、フッターをフロートさせるか、固定の高さに設定すると修正できます。浮かせることができず、固定の高さを使用できない場合はどうなりますか？その場合のオプションは何ですか？

HTML

<div id="footer">
    <div class="left"> <a href="#">Home</a> <a href="#">Products</a> <a href="#">About</a> <a href="#">Contact</a> </div>        
</div>

CSS

#footer {
    width:970px;
    margin:0 auto;
    border:1px solid red;
}
#footer .left {
    float:left;
    width:250px;
    margin-top:20px;
}
#footer .left a {
    float: left;
    display: block;
    padding: 0px 0px 0px 7px;
    color: #969696;
    text-decoration: none;
}​

​
4

3 に答える 3

4

overflow: hidden;#footerで使用します。

于 2012-06-23T21:57:38.893 に答える
1

フロートをクリアする必要があります。そうしないと、親ボックス（この場合は#footer）が折りたたまれます。

<div id="footer">
  <div class="left"> 
    <a href="#">Home</a> 
    <a href="#">Products</a> 
    <a href="#">About</a> 
    <a href="#">Contact</a> 
    <div style="clear:both;"></div><!-- clear floated elements (anchor tags) on this level -->
  </div>
  <div style="clear:both;"></div><!-- clear floated element (div.left) on this level -->        
</div>
于 2012-06-23T21:54:18.853 に答える
1

#footerとクラス名（「left」）の間にスペースを入れないでください。つまり、＃footer.leftと＃footer.leftの間にスペースを入れる必要があります。

更新されたコードはここにあります：http： //jsfiddle.net/sPA2V/1/

于 2012-06-23T22:09:17.027 に答える