Как выровнять кнопки facebook и twitter совместно?

Question

У меня в настоящее время проблема с выравниванием кнопки общего доступа facebook и твит-кнопки друг с другом, так как я слабый в CSS. вот мой код:

<div class="fb-share-button" data-href="http://www.hootpile.com/<?php echo $username; ?>" data-layout="button"></div> 
 
<a href="https://twitter.com/share" class="twitter-share-button" data-url="" data-text="check out my profile on Hootpile" data-via="hootpile" data-count="none">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Но они, похоже, не присоединяются друг к другу.

Answer 1

Ваши проблемы связана со структурой. Один из них - DIV, а другой - A.

Вы должны поместить оба затем в список Li См Exemple приведенную ниже, просто адаптирует алгоритм IMG URI & назначения связаны

<ul class="list-inline"> 
 
           <li> 
 
            <a  href="https://www.facebook.com/"> 
 
             <span class="social-icon-fb"></span> 
 
            </a> 
 
           </li> 
 
           
 
           <li> 
 
            <a href="https://www.twitter.com/"> 
 
             <span class="social-icon-twitter"></span> 
 
            </a> 
 
           </li> 
 
           
 
          </ul>

.social-icon-fb { 
 
    background: url('../images/social-icon-fb.png') no-repeat; 
 
    width: 42px; 
 
    height: 42px; 
 
    display: block; 
 
} 
 
.social-icon-twitter { 
 
    background: url('../images/social-icon-twitter.png') no-repeat; 
 
    width: 42px; 
 
    height: 42px; 
 
    display: block; 
 
}

Answer 2

Вы пробовали применять стиль

display: inline-block; 

Если применить CSS к обоим класса для кнопок, то вы должны быть в состоянии получить их, чтобы выровнять ..

, пожалуйста, посмотрите на мой jsfiddle для Css раствора

https://jsfiddle.net/digitaliss/koo6o16n/