CSS浮动右侧无法正常工作答案

【问题标题】：CSS float right not working correctlyCSS浮动右侧无法正常工作
【发布时间】：2022-01-11 01:06:22
【问题描述】：

我的右浮动没有按我的预期工作。

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

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

非常感谢

【问题讨论】：

标签： html css css-float

【解决方案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/

【讨论】：

这实际上不起作用 - 看看当你增加容器的大小时按钮如何垂直对齐：jsfiddle.net/jpdbos8u

【解决方案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/

【讨论】：

【解决方案3】：

很简单，改变元素的顺序：

原产地

<div style="">

    My Text

    <button type="button" style="float: right; margin:5px;">
       My Button
    </button>

</div>

改为：

<div style=""> 

    <button type="button" style="float: right; margin:5px;">
       My Button
     </button>

   My Text

</div>

【讨论】：

【解决方案4】：

您的文本没有使用float:left 命令。

【讨论】：

【解决方案5】：

喜欢这个

final answer

css

h2 {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin: 0;
    padding: 0;
}
.edit_button {
    float: right;
}

demo1

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>

demo

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>

【讨论】：

该行必须位于所有元素之下。