4

この簡略化されたスニペットを考えると:

<html>
  <body>
    <div>
      <div style='text-align:center;'>asdfaskjdfakjsd</div>
      <div style='float:right'>
        <input type='submit' value='asdf' />
      </div>
    </div>
  </body>
</html>

ボタンは右に浮いていますが、テキストの下 (次の行) にあります。相対位置を使用して再配置できることはわかっていますが、両方を同じ行に配置する正しい方法はありますか。

右側にボタンを追加してもテキストの中央揃えに影響しない場合はさらに良い. つまり、左に押されません。

4

4 に答える 4

4

You can switch the order of the two divs:

  <div style='float:right'>
    <input type='submit' value='asdf' />
  </div>
  <div>asdfaskjdfakjsd</div>

As long as you don't mind them being in reverse order.

Here's a fiddle to demonstrate this effect. The fourth example shows the divs reversed.

于 2012-06-27T17:52:23.410 に答える
2

飛び跳ねてすみません。逆の div を使用しても、テキストが完全に中央に表示されないことに気付きました。

さらに別の解決策があります (5 番目の例): http://jsfiddle.net/tracyfu/zYzqr/

#method5 {
  position: relative;
}

#method5 .submit {
  position: absolute;
  right: 0;
  top: 0;
}

これに関する唯一の問題は、注意を怠った場合、またはテキストが動的である場合、絶対配置された送信と衝突する可能性があることです。

于 2012-06-27T17:55:33.307 に答える
1

初めてあなたの質問を誤解しました。float:left;最初の div に追加し、その下の div にも必ず追加する必要がありますclear:both;。テキストを中央に配置する場合は、最初の div に幅が必要です。

HTML :

<div id="container">
    <div id="content">
        asdfaskjdfakjsd
    </div>
    <div id="containerButton">
        <input type='submit' value='asdf' />
    </div>   
</div>
<div class="clear">asdfaskjdfakjsd</div>

CSS:

#container {
    width:300px;   
}

#content {    
    float:left;
    text-align:center; 
    width:90%;
}

#containerButton {
    text-align:right;
​}

.clear {
    clear:both;
​}​

ライブデモ

于 2012-06-27T17:49:21.727 に答える
1

標準的なアプローチは、「clearfix」ハックを使用することです。CSS:

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

ニコラス・ギャラガーのクレジット。次に、行をcf要素で囲みます。

<div class="cf">
    <span>Button text</span>
    <div style='float:right'>
        <input type='submit' value='asdf' />
    </div>
</div>

ボタンのテキストを に変更するか、 のままにして左にフロートさせるspanことができます。は、ブロック プロパティを自然に示さない要素のセットに与えるために使用されます。それがなければ、後続のコンテンツはクリアされません。divcf

于 2012-06-27T18:03:21.437 に答える