右のフロートが期待どおりに機能しません。
ボタンを行の上のテキストの右側にうまく配置したい：
<div style="padding: 5px; border-bottom-width: 1px; border-bottom-color: gray; border-bottom-style: solid;">
My Text
<button type="button" class="edit_button" style="float: right; margin:5px;">My Button</button>
</div>
ただし、常に線の上に浮かんでいるようです。
DIV のパディングまたはマージンを増やしても、右側のボタンはまだ下の行に押し込まれているようです。
右側のボタンのパディングとマージンをいじってみましたが、テキストの横にきれいに配置できないようです。
フィドルはここにあります：
どうもありがとう
テキストをdiv内にラップして左にフロートする必要がありますが、ラッパーdivには高さが必要です。また、垂直方向の配置のために行の高さを追加しました
<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;">
<div style="float:left;line-height:30px;">Contact Details</div>
<button type="button" class="edit_button" style="float: right;">My Button</button>
</div>
ここにもjsフィドル=） http://jsfiddle.net/xQgSm/
ここにそれを行う1つの方法があります。
HTML が次のようになっている場合:
<div>Contact Details
<button type="button" class="edit_button">My Button</button>
</div>
次の CSS を適用します。
div {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: gray;
overflow: auto;
}
.edit_button {
float: right;
margin: 0 10px 10px 0; /* for demo only */
}
トリックは、新しいブロック整形コンテキストを開始するに適用overflow: autoすることです。その結果、タグdivで定義されたブロック領域内にフローティング ボタンが囲まれます。div
スタイルを調整する必要がある場合は、ボタンに余白を追加できます。
元の HTML と CSS では、フロート ボタンはコンテンツ フローの外にあったため、divフロート要素を含まないインフロー テキストに対して の境界線が配置されていました。
デモを参照してください: http://jsfiddle.net/audetwebdesign/AGavv/
このような
CSS
h2 {
border-bottom-width: 1px;
border-bottom-style: solid;
margin: 0;
padding: 0;
}
.edit_button {
float: right;
}
CSS
h2 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: gray;
float: left;
margin: 0;
padding: 0;
}
.edit_button {
float: right;
}
html
<h2>
Contact Details</h2>
<button type="button" class="edit_button" >My Button</button>
html
<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray; float:left;">
Contact Details
</div>
<button type="button" class="edit_button" style="float: right;">My Button</button>
float:leftテキストにコマンドを使用していません。