1

ヘッダーでコンテンツをカバーし、ページの長さ全体にまたがるにはどうすればよいですか？このcssを使うと

#header {
    display: inline-block;
    background-color: #015367;
}

#login {
    color: #b92c2c;
    font-size: 1.25em;
    margin-left: 18em;
    position: relative;
    top: 16px;
    text-decoration: none;
}

#search-form {
    margin-left: 0.5em;
    margin-right: 15em;
    position: relative;
    top: 18px;
}

.lfloat {
    float: left;
}

.rfloat {
    float: right;
}

このhtmlで

<body>
    <div id="header">
        <div id="page-nav" class="rfloat">
            <a id="login" class="lfloat" href="/login">login</a>
            <form id="search-form" class="rfloat" action="search.py" method="get">
                <input id="searchbox" type="text" name="q" placeholder="search"/>
            </form>
        </div>
    </div>
</body>

この結果が得られます（Firefoxで） html+cssの結果

適切なヘッダー（stackoverflow、facebookなど）を取得するには何を変更する必要がありますか？

4

4 に答える 4

2

float内の要素に使用したので#header、これを追加するだけで済みます。

#header {
    background-color: #015367;
    overflow:hidden;
}

オーバーフロー前：非表示

ここに画像の説明を入力してください

黒い境界線に注意してください#header。内容が折り返されていません。

オーバーフロー後：非表示

ここに画像の説明を入力してください

それをチェックしてください：http：//jsfiddle.net/AliBassam/vpRc2/

top要素が好きなように配置されるように調整します。position:relative;ここでは使用せず、とを使用するだけfloatsですmargins。

于 2013-02-08T20:40:14.690 に答える
1

これをCSSに追加して、本文のマージンをゼロにします。

body {
  margin: 0;
}

DEMOを参照してください。

positionまた、とのtopプロパティを#loginとから削除し、代わりにそれらを配置するために#search-form使用することをお勧めします。margin

于 2013-02-08T20:35:18.680 に答える
1

インラインブロック??

#header {
    float:left;
    width:100%;
    clear:both;
}
于 2013-02-08T20:46:20.687 に答える
0

ログインフォームを含めるためにヘッダーボックスを拡張しようとしているのではないかと思います。発生している影響は、ヘッダータグでフローティング要素を使用しているためです。フローティング要素はドキュメントの通常のフローから除外されます。これが、親要素が実際のスペースの占有を検出できない理由です。

overflow:hidden;これには簡単な修正があり、ヘッダーdivのスタイルにaを追加するだけです。これで問題は解決しますが、正しい方法とは見なされません。オーバーフローは、そのような方法で使用されることを意図したものではありません。代わりに、「clearfix」メソッドを使用することをお勧めします。

実際のコードへのリンクは次のとおりです：http ：//www.webtoolkit.info/css-clearfix.html

あなたがしなければならないのは、このコードをクラスとしてヘッダー要素に追加することです。

これがお役に立てば幸いです:)

于 2013-02-08T20:46:05.067 に答える