0

右上隅に 2 つのリンク (メニューとオプション) が必要な DIV を作成しました。

<div class="Clear">
    <ul class="Clear">
      <li><a>Menu</a></li>
      <li><a>Options</a></li>
    </ul>
    <h2>Header</h2>
    <p>Text</p>
</div>

ul を右に揃えるために、「float: right」を使用しました。

オンラインの例は次のとおりです。http://jsfiddle.net/y2hhm/8/

各リンク テキストは、background-image を使用してアイコン イメージに置き換えられます。

最初のDIVでは問題ないようです。しかし、2 番目にテーブルが押し下げられます。

「position:absolute」も試してみましたが、右揃えが難しいです。

メニュー/オプションリストを両方で同じように見せる方法を知っている人はいますか?

4

1 に答える 1

1

編集: テーブルには、ブラウザによって適用されるデフォルトのスタイルがあります。2 番目のフィドル (黄色とオレンジ色のフィドル) でこの特定の問題を解決するには、テーブルのborder-spacing: 0;.

これらの事前設定されたプロパティが気になる場合は、おそらく CSS リセットを使用できます。

------------------------------

ul と ol には、ブラウザごとに異なるデフォルトのスタイルが適用されているという事実を見落としているかもしれません。パディングを設定するものもあれば、マージンを設定するものもあります（自分でテストしていません）。

これを CSS に追加するだけです: (テスト済みで、フィドルで動作しています)

ul {
  padding: 0;
  margin: 0;
}

h2 要素と table 要素は、ul のフロートに対して異なる反応を示します。h2 CSS をclear:bothul からのマージンに設定すると、影響も受けます。何らかの理由でテーブル要素は、フロート要素のマージンを考慮します (理由は説明できません)。

注意: // は有効な CSS コメントではありません。使用する /* */。

どうしてもメニューをフローから削除したい場合は、親の div をposition: relative;に、ul を に設定しposition: absolute; margin-left: 80%; margin-top: 0%;ます。

この方法の欠点は、メニューの長さを概算する必要があることです。(この場合、私は 80% のマージンを取ったので、20% と推定されます) . div の幅が動的であるため、ビューポートが小さすぎると、メニューがテーブルの外に浮いてしまいます。div を に設定することでこれを防ぐことができますがoverflow: hidden;、全体的には...

これが私が解決しなければならない問題である場合、私は単純に に固執しfloat: right;、メニューと次の要素の間に空白を残します...

于 2013-06-06T14:47:26.643 に答える