我制作了一些带有计数器的社交按钮,我希望计数器数据显示在我的按钮上方。但不知何故它们总是在按钮内部。
1. 是否可以将分享数量放在按钮上方?如何实现?
2. 每个社交按钮都有内部文本,即使我添加了float:left和text-align:left,文本仍然显示在中心位置,为什么?
请查看我的fiddle... Fiddle 我的HTML代码:
1. 是否可以将分享数量放在按钮上方?如何实现?
2. 每个社交按钮都有内部文本,即使我添加了float:left和text-align:left,文本仍然显示在中心位置,为什么?
请查看我的fiddle... Fiddle 我的HTML代码:
<a class="post-share facebook entShare" target="entsharewindow" href="#">
<div class="social-buttons-text">Facebook Like</div><span>0</span>
</a>
<a class="post-share facebook entShare" target="entsharewindow" href="#">
<div class="social-buttons-text">Facebook Share</div><span>0</span>
</a>
<a class="post-share twitter entShare" target="entsharewindow" href="#">
<div class="social-buttons-text">Twitter</div><span>0</span>
</a>
我的CSS:
a.post-share {
display: block;
width: 74px;
height: 34px;
float: left;
margin: 10px 0px 0px 0px;
background: #3e599a url(sidebar-share.png) no-repeat 0 0;
text-decoration:none;
width: 110px;
text-indent: 50px;
font: 15px/46px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #FFFFFF;
}
a.post-share:hover {
opacity: 0.8;
text-decoration: none;
cursor: pointer;
}
a.post-share span {
width: 22px;
height: 18px;
padding: 3px;
display: block;
float:right;
background-color:#080563;
color: #FFFFFF;
font-style:bold;
vertical-align: middle;
font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align:center;
text-indent: 0;
}
a.post-share.facebook {
background-color: #3B5998;
background-image: url('/images/social-icons/facebook-32.png');
margin-right: 10px;
}
a.post-share.facebook {
background-color: #3B5998;
background-image: url('/images/social-icons/facebook-32.png');
margin-right: 10px;
}
a.post-share.googleplus {
background-color: #D14836;
background-image: url('/images/social-icons/googleplus-32.png');
margin-right: 10px;
}
.social-buttons-text {
font-size:4px;
color:#FFFFFF;
float:left;
margin:0px;
padding:0px;
text-align:left;
}