使用Wordpress,我在我的页脚中添加了一个自定义HTML小部件,我将其用于一些Font Awesome图标链接。我的代码如下:
<div style="float:right;margin-top:17px">
<a href="">Font Awesome Icon 1</a>
<a href="">Font Awesome Icon 2</a>
<a href="">Font Awesome Icon 3</a>
<a href="">Font Awesome Icon 4</a>
</div>
这很有效。他们在我的页脚中也坐在我想要的地方,然后按顺序显示,1到4。但后来我被要求添加第5个图标,这次是带弹出窗口的电话图标,显示客户的电话号码。
所以我的代码变成了:
<div class="footerSocialWidgets">
<div class="widgetPhoneTooltip">
<a href="">Phone Font Awesome Icon</a>
<span class="widgetPhoneTooltipText">PHONE NUMBER</span>
</div>
<a href="">Font Awesome Icon 1</a>
<a href="">Font Awesome Icon 2</a>
<a href="">Font Awesome Icon 3</a>
<a href="">Font Awesome Icon 4</a>
</div>
我的CSS如下:
.footerSocialWidgets {
float: right;
margin-top: 17px;
}
.widgetPhoneTooltip {
position: relative;
display: inline-block;
}
.widgetPhoneTooltip .widgetPhoneTooltipText {
visibility: hidden;
width: 180px;
top: -5px;
right: 105%;
margin-top: 7px;
background-color: black;
color: white;
opacity: 0.6;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.widgetPhoneTooltip:hover .widgetPhoneTooltipText {
visibility: visible;
}
这一切都很有效,除了无论我尝试什么,新手机图标始终是最后一个图标。由于页面中的限制,我需要将其显示为第一个图标,以便我可以从左侧显示文本弹出窗口。
根据下图,手机图标卡在最右侧。无论我尝试什么,我都不能把它哄到左边进入Facebook图标当前占用的空间。这样,文本弹出窗口将显示图标的左侧,不会干扰其他任何内容。我只是不知道我可以改变什么来改变手机图标的位置。任何帮助将不胜感激。
编辑:我仍然遇到麻烦。我将第一个div更改为类选择器只是为了使它更清晰,尽管我只是转移了相同的CSS。编辑2:导致问题的是电话图标DIV。我只是单独留下字体真棒图标,它按预期出现在左侧。然后,我在DIV(widgetPhoneTooltip)中删除了所选的类,只留下了一个标准的DIV,它仍然执行了它。