CSS float right funktioniert nicht richtig

Question

Mein rechter float funktioniert nicht, wie ich es erwarte.

Ich möchte meine Taste oberhalb einer Linie rechts von meinem Text schön ausgerichtet:

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

aber es scheint immer über die Linie zu schweben.

Wenn ich die Polsterung oder den Rand des DIV vergrößere, scheint der Knopf auf der rechten Seite immer noch über die Linie nach unten geschoben zu werden.

Ich habe versucht, mit Paddings und Ränder der Schaltfläche auf der rechten Seite zu spielen, aber ich kann nicht scheinen, dass es ordentlich neben dem Text platziert wird. hier

Fiddle ist:

http://jsfiddle.net/qvsy7/

Vielen Dank

Answer 1

Sie Ihren Text nach innen div wickeln müssen und schweben sie verlassen, während Wrapper div Höhe haben sollte, und I'v Zeilenhöhe auch

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

für vertikale Ausrichtung hinzugefügt auch js Geige hier =) http://jsfiddle.net/xQgSm/

Answer 2

dir auch gefallen

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

Sie nicht float:left Befehl für Ihren Text verwendet haben.

Answer 4

Hier ist eine Möglichkeit, es zu tun.

Wenn Sie HTML sieht wie folgt aus:

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

gelten die folgenden 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 */ 
} 

Der Trick ist overflow: auto zum div anzuwenden, die einen neuen Block-Formatierungskontext gestartet. Das Ergebnis ist, dass die floated-Schaltfläche innerhalb des Blockbereichs eingeschlossen ist, der durch den Tag div definiert wird.

Sie können der Schaltfläche dann Ränder hinzufügen, falls erforderlich, um Ihr Styling anzupassen.

In der ursprünglichen HTML und CSS, die floated-Schaltfläche war aus dem Content-Flow so die Grenze der div wäre in Bezug auf die In-Flow-Text, der keine floated Elemente enthält positioniert.

Siehe Demo an: http://jsfiddle.net/audetwebdesign/AGavv/

Answer 5

Verry Einfache Reihenfolge aendern Element:

Herkunft

<div style=""> 

    My Text 

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

</div> 

Wechseln zu:

<div style=""> 

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

    My Text 

</div>