- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我构建了一些带有计数器的社交按钮。我希望计数器数据显示在我的按钮之上。不知何故,它们总是在按钮内。
能不能把分享数放在按钮上面,怎么做?
每个社交按钮都有文本,即使我放置了 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;
}
最佳答案
a
标签position:relative
和里面的span
position:absolute
并给出top
和 left
将其对齐到 position
a.post-share {
display: block;
width: 74px;
height: 34px;
float: left;
margin: 40px 0px 0px 0px;
background: #3e599a url(sidebar-share.png) no-repeat 0 0;
text-decoration: none;
width: 110px;
font: 15px/46px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #FFFFFF;
position: relative;
}
a.post-share:hover {
opacity: 0.8;
text-decoration: none;
cursor: pointer;
}
a.post-share span {
width: 22px;
height: 18px;
padding: 3px;
display: block;
position: absolute;
top: -24px;
right: 0;
background-color: #080563;
color: #FFFFFF;
font-weight: 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;
}
<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>
关于html - 将 span 放在 div 之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29716296/
我有一个模式来匹配类似的东西 ... 1036 ... 但是我不想匹配 1036 因为会抓 1036 但无论如何我不想捕获双倍跨度,因为我不需要这些数据。我需要跨度和行尾之间的数据。 我在跨度的末尾尝
如何使用正则表达式来匹配该字符串: regularexpression . 如何交换第一个跨度的内容和第二个跨度的内容。 我认为可以使用jquery源码。 最佳答案 请务必阅读 RegEx match
我正在测试一个指令,该指令会在 200 个字符后 chop 文本。它改变了这一点: 对此: long text long text long text long text long
我有代码将这个字符串解析成一个字符数组: var textArray = Regex.Replace(text, @"]*|/)?>", String.Empty).Trim().ToCharA
我正在尝试使用 BeautifulSoup 提取包含在 id="titleDescription"范围内的字符串。 Customer Choice Award Winner
Hello
拆分为 Hello如何分割Hello至 Hello使用javascript var text = "Hello"; 记住:我不知道什么包含 , 我不知道 有没有属性 我找到了答案! var patt=/^(.*)$/i
我有一个数组列表 ArrayList al = new ArrayList(); al.add("tree good has"); al.add("ok go by"); al.add
我有一个使用 span 的 html 文件关键字以两种不同的方式。 第一个在第二个定义中 button.groovyButton span这里: button.groovyButton { b
仍在尝试让新站点的导航控件按照我想要的方式工作。 我将我的问题简化为这段代码: Test span { display: inline-block; heigh
This is 城市。它因 而闻名。
”我是编码新手 在下面的 pgm 中,任何人都可以帮我找出为什么 ng-bind 不起作用吗? 提前致谢。 Angular js Welocme!Please enter valu
我必须在下面的 html 代码中提取文本内容以进行 python 网络抓取,问题是类参数,所有三个变量都具有相同的类参数,所以我尝试使用 arial-label,但它不起作用。 2, 3 Proper
如何填充一组 带有一个带有循环的单词数组? 如果数组包含[ "one", "two", "three" ]并被称为“wordarray” 然后我想填充跨度,使其看起来像 one two
如果我们有 div 并且没有跨度,即一个跨度中的跨度,并且每个跨度都有一种颜色样式,如何使用 css 或 jquery 覆盖特定样式[颜色]..。请帮助我 最佳答案 你的意思是这样的吗? red bl
我以为下面的选择器只会匹配example b。有人可以向我解释一下 CSS 路径的工作原理吗? body div span a{ background:#000; color:#fff
我正在尝试获取内可用的文本元素。我已经使用innerHTML来检索内部文本,但很少元素内部文本放置在 内元素。 在检索文本值时,将其获取为 sample text作为输出字符串。谁能帮我删除 在输出
我应该加上“n” (显示“n”flaticon-icons)到一个div(我的页面是.php) 这是 div 这是 div_icon CSS 类 @media (max-width: 600px
无法获取“表格”中的跨度文本,谢谢! from bs4 import BeautifulSoup import urllib2 url1 = "url" content1 = urllib2.urlo
这个问题在这里已经有了答案: My inline-block elements are not lining up properly (5 个答案) 关闭 8 年前。 HTML $ 400 这会在同
我正在尽力在图像中插入 span 标签标题。 两者都在段落和 span 标签内。 如何让 lorem ipsum 文本作为标题出现在图像的底部?? Lorem ipsum dolor
我有以下 HTML 文件。 "| Testing" 我要打印 "| Testing" , 而不是打印这个打印 "| Testing" .所有这
我是一名优秀的程序员,十分优秀!