CSS浮动权限无法正常工作

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>

也js小提琴这里=) 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将根据流入文本定位边框,该文本不包含任何浮动元素.

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

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