1

float:right;ユーザー情報を画面の右側に配置するための Web サイトのヘッダーを作成しています。ユーザーがブラウザを小さくする場合を除いて、これは問題なく機能します。ユーザー情報は次の行にジャンプします。問題はありませんが、ヘッダーはそれと共に展開されません。

メディアクエリを使用せずにヘッダーを下に展開する解決策を見つけようとしています。メディア クエリを使用しても問題ありませんが、自然に展開する方がはるかに優れています。

例としてjsFiddelをまとめました。問題を説明するのにひどい仕事をしている場合に備えて。

これを修正するためにいくつかのことを試しました。

float:left;左隅のロゴにを配置しようとしましたが、ヘッダーの背景が消えてしまいます。そしてoverflow:auto;、ヘッダーに a を付けると、スクロールバーが表示されます。

また、メディアクエリアを使用してヘッダーを手動で展開しようとしましたが、それよりも優れた、よりクリーンな方法が必要です。

どんな助けでも大歓迎です。

header{
    background-color: #23234c;
    padding: .3em 0;        
}

header li{
    display: inline-block;
    margin:0 .5em;
    font: bold 1.2em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.topLinks{
    float: right;
}
4

1 に答える 1

2

次のヘッダー スタイルを追加してみてください。

header {
    clear: both;
    overflow: hidden;
}

これにより、ヘッダーはフローティング コンテンツよりも大きくなります。

于 2013-07-15T17:30:17.913 に答える