0

画面の左上にロゴが表示されたヘッダーを作成しようとしています。ロゴの右側に、そのベースに合わせて、トップメニューを配置したいと思います。私はCSSフレームワークを使用していません。すべてのHTMLおよびCSSコードはここにあります。

メニューをロゴの下部に揃えることができません（がありますfloat: left;）。また、すべての要素（）に境界線があるマージン設定をborder: 1px solid;正常にテストした後、境界線を削除するとすぐにすべてが再シャッフルpadding: 1px;され、それらを所定の位置に保持するために追加する必要があります。

誰かが見て、関連するCSSの正しいアプリケーションについて私にアドバイスしてもらえますか？

編集：
コードが実際に機能することに注意してください。私の問題は、それがハックであるということです（本質的に、仕事を成し遂げるために存在しないパディングを追加します）。

4

1 に答える 1

1

ロゴとナビゲーション コンテナーを絶対に配置してから、各要素の位置とサイズを適切に設定することをお勧めします。この IMHAO は、フローティング ヘッダー要素よりも堅牢で信頼性があります。

すなわちCSSで：

header {
    width: 100%; height: xpx;
    postion:relative; /* This makes elements inside that have position:absolute act relative to the container, useful if you need to move it around */
    top:0; left:0;
}

#logo {
    background: blah; width:xpx; height:xpx;
    position: absolute;
    top:0px; left:0px; 
}

nav.top_nav {
    width:xpx; height:xpx;
    position: absolute;
    top:0px; left:[header width + some padding]px;
}

もちろん、必要に応じてゼロを調整してパディングすることもできます。

于 2012-04-25T00:29:56.527 に答える