0

使用下面的代码时,我希望标题、登录和注册在标题 div 中,但是似乎只有标题,我很确定是 float:right 导致了问题,因为它在我工作时正常删除它。

<div id="container" style="width:100%">
    <div id="header" style="background-color:#FFA500;padding:0;width:100%;">
        <h1 style="margin-bottom:0;">Title</h1>
        <p style="float:right;padding:5px;">login</p>
        <p style="float:right;padding:5px;">sign up</p>
    </div>
</div>

有人可以解释为什么会这样,也许可以建议我如何纠正它?

谢谢

4

5 回答 5

1

你有这个问题是因为:

  1. h1具有display:block默认样式,它将征服整个宽度。
  2. 在子容器中,你只是申请floatp而不是h1

看,如果你分配float:left给那个h1,你会得到你想要的结果。这是因为它已经向左浮动,而右边的剩余空间将被具有样式的段落占据float:right

所以编辑后的代码将是:

<div id="container" style="width:100%;">
    <div id="header" style="background-color:#FFA500;padding:0;overflow:hidden;">
        <h1 style="float:left;margin-bottom:0;">Title</h1>
        <p style="float:right;padding:5px;">login</p>
        <p style="float:right;padding:5px;">sign up</p>
    </div>
</div>

p / s:不要忘记添加overflow:hidden;#header清除浮动。

于 2013-06-20T07:19:13.827 回答
1

h1是一个块元素..试试display:inline;for h1

小提琴 - http://jsfiddle.net/JBK4k/

于 2013-06-20T03:54:35.763 回答
0

你需要明确的浮动,试试这个:

#header:after,
#hader:before{
   content:"";
   display: table;
}
#header:after{
   clear:both;
   overflow: hidden;
}
#header {
  zoom: 1;/*for ie6*/
}

其他解决方案,请点击这里

于 2013-06-21T00:50:20.273 回答
0

为了解释发生了什么,当您“浮动”某些内容时,您实际上是将其从文档流中拉出,因此包含的 div#header 会折叠到最后一个非浮动元素。有几种方法可以“清除浮动”,以便父容器完全包含浮动元素。你可以像上面提到的那样浮动父容器(浮动元素将包含浮动元素),或者你可以添加溢出:隐藏到容器中(我经常这样做),或者你可以使用“easy clear”方法,这可能是这些天最受欢迎。如果您搜索“清除浮动元素”,您可能会看到更深入的解释。

于 2013-06-20T04:28:05.550 回答
0

如果你给父母期望的高度,你不需要担心浮动。试试这个为浮动元素的父元素添加一些高度

height:30px;//给你想要的任何高度

<div id="container" style="width:100%">
   <div id="header" style="background-color:#FFA500;padding:0;width:100%; height:30px;">
      <h1 style="margin-bottom:0;">Title</h1>
      <p style="float:right;padding:5px;">login</p>
      <p style="float:right;padding:5px;">sign up</p>
   </div>
</div>

或者 你应该清除浮动。尝试这个

clear:both;// 或给clear:right只清除 float:right 或给clear:left只清除 float:right

<div id="container" style="width:100%">
   <div id="header" style="background-color:#FFA500;padding:0;width:100%">
      <h1 style="margin-bottom:0;">Title</h1>
      <p style="float:right;padding:5px;">login</p>
      <p style="float:right;padding:5px;">sign up</p>
      <div style="clear:both"></div><!--clear both floats-->
   </div>
</div>
于 2013-06-20T08:15:42.460 回答