Question

У меня есть кнопки на акции в нижней части моей страницы, глядя хорошо в Chrome и Firefox:

В сафари не так много:

В опере ломает тоже:

Это мой 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> 

Это мой 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 
} 

Что я здесь делаю неправильно? И как я могу избежать подобных вещей в будущем, это должно быть довольно стандартным (извините не разработчик пользовательского интерфейса), что делают люди.

Answer 1

ИТАК движется custom-gplus-follow к началу social бы решить эту проблему, так как float: right элементы должны прийти раньше других в html, чтобы оставаться в одной строке.

Answer 2

Вместо использования float, как указано Av Avt используйте display: inline; на каждом классе, как это:

.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; 
}