1

したがって、ヘッダーには2つのもの、つまりh1とnavの画像があります。HTML の簡略版を次に示します。

<header>
  <h1><img src="../img/logo.png"></a></h1>
  <nav>
    <ul>
      <li>blahblah</li>
    </ul>
  </nav>
</header>

h1要素を左に、navを右に移動させたい。私は単にヘッダーに幅を与え、次のように h1 と nav の両方を絶対に配置しました:

header {height: 120px;}
h1 {position:absolute; left: 0;top:0;}
nav {position:absolute; right:0; top:0;}

機能しますが、ややエレガントではないと思います。それを行うための他のより良い方法はありますか？

4

3 に答える 3

2

はい、ポジショニングなしで左右に浮かせることができるはずです。

header {
   height: 120px;
}
h1 {
   float: left;
}
nav {
   float: right;
}
于 2013-02-21T15:36:53.090 に答える
1

通常、次floatのようなそれぞれのコーナーにある要素だけです

header { overflow:auto; }
header h1 { float: left; }
header nav { float: right; }

overflowヘッダーが要素の周囲の高さを保持するために使用されますが、場合によっては削除できます。

于 2013-02-21T15:37:26.753 に答える
0

CSSのFloatプロパティを使用すると、要素を右または左にフロートさせることができますが、要素をインデントする場合は、次を使用する必要があります。

text-indent: 10px;

これをクラスに追加し、インデントが必要な場所でこのクラスを要素に追加できます

于 2013-02-21T15:38:56.047 に答える