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是他们最终浮动在中ul，它本身仍然是左对齐的。li您可以浮动整个元素，而不是浮动单个元素ul。至少在 jsFiddle 中，还需要对#main部分进行大容量化，以免页脚和页眉冲突：

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

这是jsFiddle，li删除了浮动并添加了上面的 CSS。

于 2013-06-04T09:25:09.353 回答
0

试试这个。添加浮动：就在

#标题 ul

代替

#标题李

并确保清除浮动。添加一个具有类 clear 的 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 回答
0

如果我理解正确，只需删除您拥有的所有 float:right 即可。

于 2013-06-04T09:22:04.810 回答
0

应用于overflow:hidden页眉和页脚 div

http://jsfiddle.net/XQLkR/

于 2013-06-04T09:33:29.170 回答