CSS：以“随机”间隔浮动“崩溃”

Question

我创建了一个网站，右上角有用于登录和注销的小按钮。 在“header_content” div 中，我有另一个带有“float：right”的 div（以将其保持在右上角），在该 div 中，我有带有链接的 li 和带有按钮的表单。一个有 float: right 和另一个 float: left （使它们保持一致）。

通常一切正常，但由于某些奇怪的原因，有时浮动会崩溃，第二个链接会“掉线”。刷新页面后一切正常，直到崩溃再次发生（虽然不是那么频繁，但仍然很烦人）

这是基于浏览器的问题（我使用的是 Chrome），还是因为我有很多“嵌套”浮动或其他问题？

编辑：

我想我还有一些我认为的花车：D 下面是代码，希望你能看懂……（一直往下掉的是button和id=right的form）

<div id="header">
  <div id="header_banner">
   .... smt
  </div>
  <div id="header_content">
     <div id="outer_left">
      ..... smt
     </div>
     <div id="outer_right">
         <li>
            <a id="left" href="........."></a>
            <form id="right" method="post" action="">                            
               <div>
                  ......
                  <button type="submit" value="value"></button>
               </div>
            </form>
        </li>
     </div>
  </div>
</div>



#header_banner, #outer_left, #left {
 float: left;
 .....
}

#outer_right, #outer_right li, #right {
 float: right;
 .....
}

Answer 1

如果没有示例，我建议您将尝试“保持一致”的两个链接向左浮动。确保它们的宽度加上填充和边距不超过包装元素的宽度。

Answer 2

你们的花车互相争吵。如果您希望元素“在线”，您可以使用“display: inline-block”做一些事情

div.right
{
    white-space: nowrap;
}

div.right ul li
{
    display: inline-block;
}

Answer 3

那么，如果reload到reload的显示发生变化，是否有内容发生变化的可能性？即使是不可见的空格字符或边框也会占用太多空间，以至于容器太小而无法将它们浮动在一条线上。 您是否尝试将容器扩大 50 像素并测试行为是否继续？