Question

我很难用花车。我试图将页眉和页脚上的列表浮动到右侧并保持图像在左侧。

当我添加浮动时，布局变得非常棘手。这是相关的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;
}

有谁能告诉我哪里出错了？

Answer 1

浮动个人li的问题在于，他们最终在 ul内浮动，li本身保持左对齐。您可以浮动整个ul，而不是浮动单个#main元素。至少在jsFiddle中，还需要增加ul {position:relative;float:right;} #main {height:200px;width:100%;clear:both;}部分，以免页脚和标题发生冲突：

li

这是jsFiddle，删除了{{1}}上的浮动广告并添加了上面的CSS。

Answer 2

如果我理解正确，只需删除所有浮动：就行了。

Answer 3

试试这个。添加浮动：在

中

#header ul

而不是

#header li

并确保清除浮子。使用class 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;
}

Answer 4

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

http://jsfiddle.net/XQLkR/

如何正确浮动列表

4 个答案: