0

次のような単純なCSSレイアウトを考え出そうとしています：

ここに画像の説明を入力

これは、ヘッダーとナビゲーション バーの HTML コードです。

<div id="header">
<h1>LOGO</h1>
<ul>
<li><a href= ""> Home </a></li>
<li><a href= ""> Logout </a></li>
</ul>
</div>

<div id="navigation">
<ul>
    <li><a href="">Home</a></li> 
    <li><a href="">Help</a>
    <li><a href="">Contact Us</a>
    <li><a href="">Customers</a> 

</div>

また、ナビゲーション バーで既にスタイリングを行っていますが、ヘッダー内の 2 つのリンクを右揃えにし、ロゴ イメージを左揃えにしたいと考えています。ヘッダー内のこれらのリンクを編集しようとすると、ナビゲーション リストの項目とヘッダー リストの項目を区別する方法がわからなくなって、すべてがめちゃくちゃになります。誰かがヘッダーの配置を手伝ってくれませんか?

4

2 に答える 2

1 
#header ul { float: left; }

また

#header ul { position: absolute; right: 0; }
于 2013-02-14T20:57:25.453 に答える
0

ヘッダーでは、h1左とul右をフロートさせてから、リンクに追加display: inlineする必要があります (それらを同じ行に保つため)。

ヘッダー内のリスト項目をターゲットにするには、次のように親セレクターを使用するだけです#header li。

必要なものは次のとおりです。

#header {
    border: 1px solid #ccc;
    overflow: hidden; /* clearfix */
}
#header h1 {
    float: left;
}
#header ul {
    float: right;
}
#header li {
    display: inline;
}

デモを参照してください。

于 2013-02-14T20:52:13.840 に答える