所以我有两个社交按钮如下：
<span class="zocial facebook"><a href="#">Share on Facebook/a></span>
<span class="zocial twitter"><a href="#">Share on Twitter/a></span>
它们显示在彼此的顶部，而不是像我喜欢的那样并排显示。
CSS：
.zocial,
a.zocial {
border: 1px solid #777;
border-color: rgba(0,0,0,0.2);
border-bottom-color: #333;
border-bottom-color: rgba(0,0,0,0.4);
color: #fff;
-moz-box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.4), inset 0 0 0.1em rgba(255,255,255,0.9);
-webkit-box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.4), inset 0 0 0.1em rgba(255,255,255,0.9);
box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.4), inset 0 0 0.1em rgba(255,255,255,0.9);
cursor: pointer;
display: inline-block;
font: bold 100%/2.1 "Lucida Grande", Tahoma, sans-serif;
padding: 0 .95em 0 0;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
white-space: nowrap;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
position: relative;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: .3em;
}
.zocial:before {
content: "";
border-right: 0.075em solid rgba(0,0,0,0.1);
font: 120%/1.65 zocial;
font-style: normal;
font-weight: normal;
margin: 0 0.5em 0 0;
padding: 0 0.5em;
text-align: center;
text-decoration: none;
text-transform: none;
-moz-box-shadow: 0.075em 0 0 rgba(255,255,255,0.25);
-webkit-box-shadow: 0.075em 0 0 rgba(255,255,255,0.25);
box-shadow: 0.075em 0 0 rgba(255,255,255,0.25);
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.zocial:active {
outline: none; /* outline is visible on :focus */
}