宽度不固定的许多span块怎么让它的位置固定在相应的div正上方?
又是我在提问...自己动手才发现问题这么多,这个自己尝试了很多方法也找了资料,然而我这个小白并没解决.谢谢各位大牛了.
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?
谢谢啦
qq_见过雪_0浏览 2611回答 2
2回答
-
qq_青枣工作室_0
<!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>
随时随地看视频慕课网APP
CSS3
Html/CSS
JQuery