Płyn CSS prawy nie działa poprawnie

Question

Mój prawy pływak nie działa tak, jak tego oczekuję.

chcę mój przycisk ładnie wyrównane do prawej strony mojego tekstu powyżej linii:

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

Jednak zawsze wydaje się unosić nad linią.

Jeśli zwiększę dopełnienie lub margines DIV, przycisk po prawej stronie wydaje się być wciśnięty przez linię na dole.

Próbowałem bawić się z paddings i marginesów przycisku po prawej stronie, ale nie mogę sprawić, aby go umieścić starannie obok tekstu.

Fiddle jest tutaj:

http://jsfiddle.net/qvsy7/

Dziękujemy

Answer 1

trzeba zawinąć tekst wewnątrz div i unoszą go w lewo, podczas gdy wrapper div powinny mieć wysokość i I'v dodawane również wysokość wiersza do pionowego wyrównania

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

również js skrzypce tutaj =) http://jsfiddle.net/xQgSm/

Answer 2

lubię tego

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 3

Nie stosować komendy float:left dla tekstu.

Answer 4

Oto jeden sposób robienia tego.

Jeśli masz HTML wygląda tak:

<div>Contact Details 
    <button type="button" class="edit_button">My Button</button> 
</div> 

zastosować następującą 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 */ 
} 

Sztuką jest zastosowanie overflow: auto do div, który rozpoczyna nowy kontekst formatowania blokowego. W rezultacie pływający przycisk jest zamknięty w obszarze bloku zdefiniowanym przez znacznik div.

Następnie można dodać marginesy do przycisku, jeśli jest to konieczne, aby dostosować styl.

W oryginalnym kodzie HTML i CSS pływający przycisk znajdował się poza strumieniem treści, więc obramowanie div zostałoby umieszczone w odniesieniu do tekstu wewnętrznego, który nie zawiera żadnych elementów pływających.

Zobacz demo pod adresem: http://jsfiddle.net/audetwebdesign/AGavv/

Answer 5

Verry Łatwa zmiana kolejności elementu:

Pochodzenie

<div style=""> 

    My Text 

    <button type="button" style="float: right; margin:5px;"> 
     My Button 
    </button> 

</div> 

Zmiana:

<div style=""> 

    <button type="button" style="float: right; margin:5px;"> 
     My Button 
    </button> 

    My Text 

</div>