CSS 向右浮动无法正常工作

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>

Answer 4

您尚未对文本使用

float:left

命令。

Answer 5

像这样

最终答案

css

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

---

演示1

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>

---

演示

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 6

您需要在元素中添加文本，例如：对于 P 标签中的段落，您也可以使用 div 标签。 这是 p 标签中的相同代码

<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;">

联系方式 联系方式 联系方式 联系方式

我的按钮

<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;">
<p>
Contact Details Contact DetailsContact Details Contact Details
</p>
<button type="button" class="edit_button" style="float: right;">My Button</button>

</div>