web-dev-qa-db-fra.com

CSS float right ne fonctionne pas correctement

Mon flotteur droit ne fonctionne pas comme je m'y attendais.

Je veux que mon bouton soit bien aligné à droite de mon texte au-dessus d'une ligne:

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

Cependant, il semble toujours survoler la ligne.

Si j'augmente le rembourrage ou la marge du DIV, alors le bouton à droite semble toujours être poussé sur la ligne en bas.

J'ai essayé de jouer avec les rembourrages et les marges du bouton à droite, mais je n'arrive pas à le placer proprement à côté du texte.

Fiddle est là:

http://jsfiddle.net/qvsy7/

Merci beaucoup

htmlcsscss-float
17
Oliver Watkins

vous devez envelopper votre texte dans div et le laisser flotter à gauche tandis que le wrapper div doit avoir de la hauteur, et j'ai également ajouté une hauteur de ligne pour l'alignement vertical

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

aussi js violon ici =) http://jsfiddle.net/xQgSm/

12
smikulic

Voici une façon de procéder.

Si votre HTML ressemble à ceci:

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

appliquer le CSS suivant:

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

L'astuce consiste à appliquer overflow: auto au div, qui démarre un nouveau contexte de formatage de bloc. Le résultat est que le bouton flottant est inclus dans la zone de bloc définie par la balise div.

Vous pouvez ensuite ajouter des marges au bouton si nécessaire pour ajuster votre style.

Dans le code HTML et CSS d'origine, le bouton flottant était hors du flux de contenu, de sorte que la bordure du div serait positionnée par rapport au texte entrant, qui ne comprend aucun élément flottant.

Voir la démo sur: http://jsfiddle.net/audetwebdesign/AGavv/

6
Marc Audet

Verry Easy, changez l'ordre des éléments:

Origine

<div style="">

    My Text

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

</div>

Changer pour:

<div style=""> 

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

   My Text

</div>
4
searching9x

Comme ça

réponse finale

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>

démo

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>
1
Falguni Panchal

Vous n'avez pas utilisé float:left commande pour votre texte.

0
user2767715