CSS-Float-Recht funktioniert nicht richtig

Mein rechter Schwimmer funktioniert nicht so, wie ich es erwarte.

Ich möchte, dass meine Schaltfläche rechts neben meinem Text über einer Zeile ausgerichtet ist:

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

Es scheint jedoch immer über der Linie zu schweben.

Wenn ich die Polsterung oder den Rand des DIV erhöhe, scheint der Knopf rechts immer noch über die Linie unten gedrückt zu sein.

Ich habe versucht, mit Polsterungen und Rändern der Schaltfläche auf der rechten Seite herumzuspielen, aber ich kann es anscheinend nicht hinbekommen, dass sie ordentlich neben dem Text platziert wird.

Geige ist hier:

http://jsfiddle.net/qvsy7/

Danke vielmals

Sie müssen Ihren Text in div umbrechen und ihn nach links schweben lassen, während Wrapper div Höhe haben sollte, und ich habe auch Zeilenhöhe für die vertikale Ausrichtung hinzugefügt

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

auch js fiddle hier =)
http://jsfiddle.net/xQgSm/

Hier ist eine Möglichkeit, dies zu tun.

Wenn Ihr HTML so aussieht:

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

Wenden Sie das folgende CSS an:

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 besteht darin, sich zu bewerben overflow: auto zum div, wodurch ein neuer Blockformatierungskontext gestartet wird. Das Ergebnis ist, dass die schwebende Schaltfläche innerhalb des Blockbereichs eingeschlossen ist, der durch definiert wird div Schild.

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

Im ursprünglichen HTML und CSS befand sich die Floating-Schaltfläche außerhalb des Inhaltsflusses, also am Rand der div würde in Bezug auf den einfließenden Text positioniert werden, der keine schwebenden Elemente enthält.

Demo ansehen unter: http://jsfiddle.net/audetwebdesign/AGavv/

Sehr einfach, Reihenfolge der Elemente ändern:

Herkunft

<div style="">

    My Text

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

</div>

Ändern:

<div style=""> 

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

   My Text

</div>

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

So was

endgültige Antwort

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>