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/

非常感谢

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>

这里也是小提琴=） http://jsfiddle.net/xQgSm/

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的边框将相对于流入文本定位，该文本不包含任何浮动元素。< / p>

请参阅演示：http://jsfiddle.net/audetwebdesign/AGavv/

Answer 3

Verry Easy，改变元素的顺序：

来源

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

Answer 4

喜欢这个

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

Answer 5

您尚未对文字使用float:left命令。

CSS浮动权限无法正常工作

5 个答案: