0

右上隅にログインおよびログアウト用の小さなボタンがあるサイトを作成しました。「header_content」div 内には、「float: right」(右上隅に保持するため) を持つ別の div があり、その div 内には、リンク付きの li とボタン付きのフォームがあります。1 つは float: right を持ち、もう 1 つは float: left を持ちます (それらを一列に並べるため)。

通常はすべて問題なく動作しますが、奇妙な理由でフロートがクラッシュし、2 番目のリンクが「落ちる」ことがあります。ページを更新した後、クラッシュが再び発生するまで、すべてが正常に戻ります (実際にはそれほど頻繁ではありませんが、それでも厄介です)。

それで、このブラウザベースの問題（私はChromeを使用しています）ですか、それとも多くの「ネストされた」フロートまたは何か他のものが必要なためですか？

編集：

私が思っていたフロートはもう少しあると思います:D コードは次のとおりです。画像が得られることを願っています... (落ち続けるのは、ボタンと id=right を持つフォームです)

<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;
 .....
}
4

3 に答える 3

0

さて、リロードからリロードへと表示が変わると、内容が変わる可能性はありますか？目に見えないスペース文字や境界線でさえ、スペースを取りすぎて、コンテナが小さすぎて一列に並べられない場合があります。コンテナをたとえば50px拡大して、動作が続くかどうかをテストしましたか？

于 2012-09-20T19:58:31.627 に答える
0

あなたのフロートはお互いに議論しています。要素を「インライン」にしたい場合は、「display: inline-block」で何かを行うことができます

div.right
{
    white-space: nowrap;
}

div.right ul li
{
    display: inline-block;
}
于 2012-09-20T19:20:55.203 に答える
0

例を挙げずに、「一列に並べよう」としている 2 つのリンクを左にフロートすることをお勧めします。パディングとマージンを合わせた幅がラッピング要素の幅を超えないようにしてください。

于 2012-09-20T19:21:08.747 に答える