CSS float rechts werkt niet correct

Mijn rechter vlotter werkt niet zoals ik verwacht.

Ik wil mijn knop netjes uitgelijnd rechts van mijn tekst boven een regel :

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

Het lijkt echter altijd over de lijn te zweven.

Als ik de opvulling of marge van de DIV vergroot, lijkt de knop aan de rechterkant nog steeds over de lijn onderaan te worden geduwd.

Ik heb geprobeerd te spelen met opvullingen en marges van de knop aan de rechterkant, maar het lukt me niet om deze netjes naast de tekst te plaatsen.

Fiddle is hier:

http://jsfiddle.net/qvsy7/

Hartelijk dank

Antwoord 1, autoriteit 100%

je moet je tekst in div laten lopen en naar links laten zweven, terwijl wrapper div hoogte moet hebben, en ik heb ook regelhoogte toegevoegd voor verticale uitlijning

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

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

Antwoord 2, autoriteit 58%

Hier is een manier om het te doen.

Als je HTML er zo uitziet:

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

Pas de volgende CSS toe:

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

De truc is om overflow: autotoe te passen op de div, die een nieuwe blokopmaakcontext start. Het resultaat is dat de drijvende knop is ingesloten in het blokgebied gedefinieerd door de divTAG.

U kunt vervolgens marges toevoegen aan de knop indien nodig om uw styling aan te passen.

In de oorspronkelijke HTML en CSS was de drijvende knop uit de inhoudsstroom, zodat de rand van de divmet betrekking tot de in-flow-tekst zou worden gepositioneerd, wat geen drijvend is elementen.

Zie demo op: http://jsfiddle.net/audetwebdesign/agavv/

Antwoord 3, Autoriteit 26%

Verry Easy, Wijzig Order van Element:

Oorsprong

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

Wijzigen naar:

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

Antwoord 4, Autoriteit 5%

U hebt niet gebruikt float:leftopdracht voor uw tekst.

Antwoord 5, Autoriteit 5%

Zoals dit

definitief antwoord

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>