css3 - css小三角定位
問(wèn)題描述
<p>文字<span class='triangle-down'></span></p>
.triangle-down { width: 0; height: 0; border-left: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-top: 0.6rem solid darkgray;}
怎么把小三角的位置調(diào)整到文字后面
問(wèn)題解答
回答1:<html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <style>p:after { content: ''; display: inline-block; width: 0; height: 0; border-left: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-top: 0.6rem solid darkgray;} </style></head><body><p>文字</p></body></html>回答2:
用偽元素:after
<p>文字</p>p:after { content: ''; display: inline-block; width: 0; height: 0; border-left: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-top: 0.6rem solid darkgray;}回答3:
position:absolute;right:0; top:0;文字元素的樣式記得加position:relative
相關(guān)文章:
1. java - 創(chuàng)建maven項(xiàng)目失敗了 求解決方法2. MySQL中的enum類(lèi)型有什么優(yōu)點(diǎn)?3. java - 線上應(yīng)用,如果數(shù)據(jù)庫(kù)操作失敗的話應(yīng)該如何處理?4. javascript - js setTimeout在雙重for循環(huán)中如何使用?5. Phpstorm搭配Sqlsever2008實(shí)現(xiàn)PDO連接報(bào)錯(cuò)6. javascript - arguments.callee7. css - 如何選擇字體?8. atom開(kāi)始輸入!然后按tab只有空格出現(xiàn)沒(méi)有html格式出現(xiàn)9. mysql - 這種分級(jí)一對(duì)多,且分級(jí)不平衡的模型該怎么設(shè)計(jì)表?10. javascript - 有適合開(kāi)發(fā)手機(jī)端Html5網(wǎng)頁(yè)小游戲的前端框架嗎?
