Question

Je boutons de partage au bas de ma page, recherche ok dans Chrome et Firefox:

En safari pas tellement:

Dans l'opéra brise aussi:

Ceci est mon HTML:

<div class="social"> 
       <div class='custom-tweeter-follow'> 
       <a class="twitter-follow-button" href="https://twitter.com/mycompany" data-show-count='false'>Follow @mycompany</a> 
       </div> 
       <div class="fb-like" data-href="https://www.facebook.com/mycompany" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div> 
       <div class='custom-gplus-follow'> 
       <g:plusone size="medium" count="false" href='https://plus.google.com/xxx'></g:plusone> 
       </div> 
       <div syle='clear:both'></div> 
</div> 

Ceci est mon css:

.copyright { 
    float: left 
    line-height: 25px 
    font-weight: 300 
    font-size: 14px 
    width: 240px 
} 

.custom-tweeter-follow { 
    float: left 
    margin: 5px 10px 0px 0px 
} 
.custom-gplus-follow { 
    float: right 
    margin: 5px 0px 0px 0px 
} 

Qu'est-ce que je fais mal ici? Et comment puis-je éviter des choses comme ça à l'avenir, cela devrait plutôt standard (désolé pas un développeur d'interface utilisateur) ce que les gens font.

Answer 1

Ok si émouvant custom-gplus-follow au début de social résoudrait le problème, étant donné que float: right éléments doivent venir avant les autres dans le HTML pour rester sur la même ligne.

Answer 2

Au lieu d'utiliser float comme Av Avt mentionné, utilisez display: inline; sur chaque classe comme ceci:

.copyright { 
    display: inline; 
    line-height: 25px; 
    font-weight: 300; 
    font-size: 14px; 
    width: 240px; 
} 
.custom-tweeter-follow { 
    display: inline; 
    margin: 5px 10px 0px 0px; 
} 
.custom-gplus-follow { 
    display: inline; 
    margin: 5px 0px 0px 0px; 
} 
.fb-like { 
    display: inline; 
}