CSS float right無法正常工作

我希望我的按鈕很好對準我的文字上面一行的權利：

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

非常感謝

來源

2013-09-30 Oliver Watkins

你需要用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/

來源

2013-09-30 10:46:23 smikulic

這實際上並不奏效 - 請參閱增加容器大小時按鈕不垂直對齊的方式：http://jsfiddle.net/jpdbos8u/ – dbau

喜歡這個

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>

來源

2013-09-30 10:36:06 falguni

線具有的所有元素去下。 –

@OliverWatkins檢查我編輯的「最終答案」 – falguni

你還沒有爲您的文本使用float:left命令。

來源

2013-09-30 10:40:14 RiKo

這是做到這一點的一種方法。

如果你的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/

來源

2013-09-30 10:43:56

檸簡單，元素的變化順序：

原產地

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

來源

2015-08-10 12:18:58 searching9x

CSS float right無法正常工作

回答

相關問題