CSS浮动不正确 [英] CSS float right not working correctly

问题描述

我的右浮动没有按我期望的那样工作。

My right float is not working how i expect it to.

我希望我的按钮在一行上方的文本的右侧对齐：

I want my button nicely aligned to the right of my text above a line :

<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>

但是它似乎总是悬停在线上。

However it always seems to hover over the line.

如果我增加DIV的填充或边距，那么右边的按钮似乎仍然会被压在底部的线上。

If I increase the padding or margin of the DIV then the button on the right still seems to be pushed over the line at the bottom.

我已经尝试过可以在右边的按钮的边距和边距处玩耍，但是我似乎无法将其整齐地放置在文本旁边。

I have tried to play around with paddings and margins of the button on the right, but i can't seem to get it to be placed neatly next to the text.

小提琴在这里：

http://jsfiddle.net/qvsy7/

非常感谢

推荐答案

您需要换行在div内部并将其浮动，而包装div应该具有高度，并且我还添加了用于垂直对齐的行高

you need to wrap your text inside div and float it left while wrapper div should have height, and I've also added line height for vertical alignment

<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 fiddle here =）
http://jsfiddle.net/xQgSm/

also js fiddle here =) http://jsfiddle.net/xQgSm/

这篇关于CSS浮动不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！