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. 在子容器中，你只是申请float，p而不是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 回答