宽度不固定的许多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

浏览 2528回答 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