Question

我创建了一个网站，其右上角有很少的登录和注销按钮。在“header_content”div里面，我有另一个div“float：right”（保持在右上角），在div里面我有链接和带按钮的表单。一个有浮动：右和另一个浮动：向左（使它们保持一致）。

通常情况下一切正常，但由于一些奇怪的原因，有时候花车会崩溃而第二个链接会“掉落”。刷新页面后一切都恢复正常，直到崩溃发生（这不是那么频繁，但仍然很烦人）

这是基于浏览器的问题（我正在使用Chrome），还是因为我必须使用许多“嵌套”浮动或其他东西？

编辑：

我想我还有更多花车，我想：D 这是代码，希望你能得到图片......（一直摔倒的是带按钮的形式，id =右）

<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

你的花车互相争论。如果您希望元素“在线”，您可以使用“display：inline-block”

执行某些操作

div.right
{
    white-space: nowrap;
}

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

Answer 2

举一个例子，我建议你向左移动你试图“保持一致”的两个链接。确保它们的宽度与填充和边距相结合不超过包装元素的宽度。

Answer 3

好吧，如果显示更改为重新加载重新加载，内容是否有可能发生变化？即使是不可见的空格字符或边框也会占用太多空间，因此容器太小而无法将它们排成一行。您是否试图通过50px放大容器并测试行为是否继续？

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

3 个答案: