又是我在提問...自己動手才發現問題這么多,這個自己嘗試了很多方法也找了資料,然而我這個小白并沒解決.謝謝各位大牛了.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 關注
- 2580 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消