CSS float right 无法正常工作

Question

我的右浮子没有按我预期的那样工作。

我希望我的按钮很好地对齐到我的文本右侧的一行上方：

 <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 的填充或边距，那么右边的按钮似乎仍然被推到底部的线上。

我曾尝试调整右侧按钮的填充和边距，但我似乎无法将其整齐地放置在文本旁边。

小提琴在这里：

http://jsfiddle.net/qvsy7/

非常感谢

原文由 Oliver Watkins 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要将文本包装在 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 fiddle =) http://jsfiddle.net/xQgSm/

原文由 smikulic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一种方法。

如果您的 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/

原文由 Marc Audet 发布，翻译遵循 CC BY-SA 3.0 许可协议