4

絶対配置された要素 (重要な場合はスパン) の左上に揃えて表示するテキストと、同じ要素の右上に揃えて表示するボタンが必要なページがあります。 編集:これの問題は、私が使用float: right;してdisplay: inline;いて、ボタンがまだ次の行をドロップするのが好きな場合でもあります。

現在、私の解決策は、ボタンをスパン要素でラップし、スパンを右にフロートさせてから、ボタンを絶対位置に設定することです。これに関する問題は、ブラウザーがボタンをレンダリングするサイズに合わせてラッパースパンの幅を手動で指定しない限り、表示されないことです。これはちょっとばかげています。

これを行う適切な方法は何ですか？

編集2:これが私の元のコードです:

#header
{
    position: absolute;
    top: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 24px;
    overflow: hidden;
}


/* Header's buttons. */
#header > span
{
    float: right;
    width: 100px;
}
#header > span > button
{
    position: absolute;
}

そしてHTML：

<span id="header">
    Trigger editor
    <span><button type="button" id="h_output">Output Triggers</button></span>
</span>
4

2 に答える 2

5

私が正しく理解したことを願っています。

<div class="clearfix">
  <div style="float:left">Text</div>
  <div style="float:right">Button</div>
</div>

clearfix が有名な場所です ( http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/ )。このように、テキストやボタンの幅を明示的に設定する必要はないと思います。

于 2009-07-13T15:10:00.110 に答える
1

要素の配置にDIV（SPANではなく）を使用する「適切な」方法だと思います。ただし、はい、左側のフロートDIVで幅を明示的に設定する必要があります。そうしないと、行全体（ブロック要素とすべて）を占めることになります。幅がオーバーフローせずにDIVのすべてのコンテンツを表示するのに十分であることを確認してください。

于 2009-07-13T15:05:13.080 に答える