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

h1はブロック要素です。 display:inline;for で試してh1ください。

フィドル - http://jsfiddle.net/JBK4k/

于 2013-06-20T03:54:35.763 に答える
1

次の理由により、その問題が発生しています。

  1. h1display: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: float をクリアするために tooverflow:hidden;を追加することを忘れないでください。#header

于 2013-06-20T07:19:13.827 に答える