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>

Answer 4

像這樣

最終答案

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 5

您尚未對文本使用float:left命令。