html - 是什么在这些社交媒体按钮中产生利润？

Question

HTML:

<ul>    
    <li class="socialHeader"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://thedomain">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>
    </li>
    <li>
        <div class="g-plusone" data-size="medium"></div>
    </li>    
</ul>

CSS:

li, ul {
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
}

.g-plusone, .twitter-share-button {
    margin: 0;
    padding: 0;
}    

输出

http://jsfiddle.net/4235gcL9/

如何让图标水平对齐？我在浏览器控制台中看到，每个动态生成的按钮附带的 javascript 包含一些宽度属性，但我不确定如何访问它们。

Answer 1

它是 iframe 的 width: 109px

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="..." class="twitter-share-button twitter-tweet-button twitter-share-button twitter-count-horizontal" title="Twitter Tweet Button" data-twttr-rendered="true" style="width: 109px; height: 20px;"></iframe>

将宽度减小到更小的值(例如 85px)以固定间距:

iframe{
   width: 85px !important; //the important is needed to override the inline width
}

FIDDLE