0

ヘッダーの左端にdivいくつかの単語が配置され、右端にいくつかの単語が配置されたヘッダーを作成したいと考えています。私は最初にspans (.headerLeftと.headerRight) を作成し、整列させたい部分の整列を調整することでこれを行いました。ただし、background-colorヘッダーが必要な場合、これは問題を引き起こしdivます。インライン CSS スタイルを少し追加するだけのベスト プラクティス ソリューションですか、それとももっと良い方法がありますか?

マイコード（例）

HTML

<div class="header">
 <span class="headerLeft">Welcome to .</span>
 <span class="headerRight"><a href="login.html">Login</a> | <a
 href ="register.html">Register</a></span>
</div>

CSS

.header {
 width:100%
 position:fixed;
 top:0;
 margin-top:0;
 background-color:red;
 text-color:#C14000;
}
.headerLeft {
 float:left;
 text-align:left;
}
.headerRight {
 float:right;
 text-align:right;
}
4

3 に答える 3

3 
#header {
    overflow: hidden;
}

このコードは問題を解決します。のheightは、 内の最も高い要素から#header自動的に取得されます。height#header

別の方法は、 for を手動で設定することheightです#header。

インラインで sth をスタイルする必要はありません:)

于 2012-06-01T17:59:51.227 に答える
2

ヘッダー クラスのオーバーフロー属性を設定して、内側のスパンを強制的にラップする必要があります。http://jsfiddle.net/PsychegoPro/rnDT8/を参照してください

于 2012-06-01T18:00:23.653 に答える
0

divが実際の高さになるようにするには、フロートをクリアする必要があります。

これは、clearfixを使用して実現できます。クリアフィックスとは何ですか？

于 2012-06-01T18:51:43.677 に答える