1

フロートで苦労しています。ヘッダーとフッターのリストを右にフロートさせ、画像を左に保持しようとしています。

http://jsfiddle.net/spadez/KYdnJ/21/

フロートを追加すると、レイアウトがめちゃくちゃになります。関連する CSS は次のとおりです。

#header {
    line-height: 50px;
    background-color: #F2F2F2;
    border-bottom: solid 1px #E8E8E8;
    padding: 0px 20px 0px 20px;
}
#header li { 
    font-family: arial, sans-serif; 
    background-color: #D3D3D3; 
    display: inline-block; 
    font-weight: bold; 
    line-height: 28px; 
    padding: 0px 9px 0px 9px; 
    font-size: 12px;
    float: right;
}
#header img {
    height: 40px;
    float: left;
}

どこが間違っているのか教えてもらえますか？

4

4 に答える 4

2

個々をフローティングすることの問題は、それ自体が左揃えのままの内でliフローティングしてしまうことです。個々の要素を浮動させるのではなく、全体を浮動させることができます。少なくとも jsFiddle では、フッターとヘッダーが衝突しないように、セクションをまとめることも必要です。ulliul#main

ul {position:relative;float:right;}
#main {height:200px;width:100%;clear:both;}

これがjsFiddleで、フロートがli削除され、上記の CSS が追加されています。

于 2013-06-04T09:25:09.353 に答える
0

overflow:hiddenヘッダーとフッターの div に適用する

http://jsfiddle.net/XQLkR/

于 2013-06-04T09:33:29.170 に答える
0

これで試してください。float:right を追加

#ヘッダーUL

それ以外の

#ヘッダー・リー

フロートをクリアするようにしてください。クラスクリアで1つのdivを追加

<div class="clear"></div>

HTML

<div id="header">
   <img src="test.jpg"/>
   <ul>
      <li><a href="#">Post</a></li>
   </ul>
   <div class="clear"></div>
</div>

CSS

#header {
  line-height: 50px;
  background-color: #F2F2F2;
  border-bottom: solid 1px #E8E8E8;
  padding: 0px 20px 0px 20px;
}
#header ul { 
  font-family: arial, sans-serif; 
  background-color: #D3D3D3; 
  display: inline-block; 
  font-weight: bold; 
  line-height: 28px; 
  padding: 0px 9px 0px 9px; 
  font-size: 12px;
  float: right;
}
#header img {
  height: 40px;
  float: left;
}
.clear{
  clear:both;
}
于 2013-06-04T09:30:29.107 に答える