Databases
StackOverflow2013
Postsdbo
POHow to add equal padding between buttons?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to add equal padding between buttons?
    text
    copied!<p><a href="http://buttonspace.com/" rel="nofollow">http://buttonspace.com/</a></p> <p>I want to put equal space between the 4 buttons at the top, but I'm having trouble. At first the "social-buttons" id was in a DIV floating left, but that caused the slider to get pushed to the right.</p> <p>So I changed everything to and now the padding style doesn't seem to have any effect.</p> <p>I then tried adding "display: inline-block;" since I read that from another StackOverflow question but that didn't help.</p> <p>Here's the current code (ignore the PHP):</p> <pre><code>&lt;!-- Social Buttons --&gt; &lt;span id="social-buttons"&gt; &lt;fb:like href="&lt;?php echo $url; ?&gt;" send="false" layout="box_count" width="60" show_faces="false" font="verdana" class="fb-like"&gt;&lt;/fb:like&gt; &lt;a href="https://twitter.com/share" class="twitter-share-button" data-url="&lt;?php echo $url; ?&gt;" data-text="&lt;?php echo $tweet_text; ?&gt;" data-count="vertical" data-via="Button_Space"&gt;Tweet&lt;/a&gt;&lt;script type="text/javascript" src="//platform.twitter.com/widgets.js"&gt;&lt;/script&gt; &lt;g:plusone size="tall" callback="callback" href="&lt;?php echo $url; ?&gt;" class="google-plus-one"&gt;&lt;/g:plusone&gt; &lt;script src="http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=&lt;?php echo $url; ?&gt;"&gt;&lt;/script&gt; &lt;/span&gt; &lt;!-- End Social Buttons --&gt; #social-buttons { display: inline-block; padding: 0 0 0 100px; } .fb-like { padding: 3px 0 0 0; border:none; overflow:hidden; width:60px; height:90px; } .twitter-share-button { padding: 6px 0 0 0; } .google-plus-one { display: inline-block; padding: 0 0 0 10px; } </code></pre> <p>Any ideas? Ideally I want the best suggestion to not only space the buttons evenly, but to use proper code for putting the buttons on that header bar in the first place ;) I'm sure my code could use lots of improvement.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload