又是我在提问...自己动手才发现问题这么多,这个自己尝试了很多方法也找了资料,然而我这个小白并没解决.谢谢各位大牛了.span {
position: relative;
top: -300%;
left: -135%;
margin-left: auto;
width: auto;
float: left;
height: auto;
font-size: 14px;
white-space: nowrap;
padding-left: 10px;
padding-right: 10px;
background-color: #D0D0D0;
color: #000000;
text-align: center;
line-height: 30px;
border: 1px solid #4F4F4F;
display: none;
}
a:hover span {
display: block;
display: inline-block !important ;
display: -webkit-inline-block !important ; /*block和inline-block分别单独试过*/
}想要的效果原先是固定宽度,想实现span会根据里面有几个字来定义span宽度,并且左右空出10px.然而这样写了以后span的位置会偏,字少的向左偏,字多的向右偏这些基本上我尝试的各种属性.由于平时需要隐藏,所以display为none.top,left位置用像素px来写然而效果一样.尝试网span里加了各种属性,该偏的还是要偏,请问有办法解决吗.还是说要写js?谢谢啦
2 回答
已采纳
qq_青枣工作室_0
TA贡献446条经验 获得超754个赞
<!DOCTYPE html>
<meta charset=UTF-8>
<style>
a{background:#666; border-radius: 50%; width: 50px; height: 50px; display: inline-block;
margin: 100px;
padding: 0;
position: relative;
}
a:hover span {
display: block;
}
span{
display: none;
background: #eee;
white-space: nowrap;
line-height: 1;
font-size: 14px;
padding: 10px;
position: absolute;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
left: 50%;
}
</style>
<div>
<a href="javascript:;"><span>文字内容文字内容文字内容</span></a>
</div>
- 2 回答
- 0 关注
- 2527 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消