css3 - css小三角定位
問題描述
<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)整到文字后面
問題解答
回答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. 百度地圖 - Android app中準備接入地圖sdk,百度VS高德哪個好一點?2. mongoDB批量插入文檔時,運行下面代碼,用MongoVUE查看數(shù)據(jù)庫,mongo庫中只存在一個文檔?不應(yīng)該是20個嗎?3. 百度地圖api - Android百度地圖SDK,MapView上層按鈕可見卻不可觸,怎么解決?4. css - 小程序canvas環(huán)形進度條5. javascript - 請問如何在pc端網(wǎng)站調(diào)用微信支付的接口6. javascript - html5的data屬性怎么指定一個function函數(shù)呢?7. javascript - 關(guān)于這組數(shù)據(jù)如何實現(xiàn) 按字母列表分類展示 不改動數(shù)據(jù)結(jié)構(gòu)8. html5 - ajax post請求后如何渲染到頁面上9. html - sumlime text3代碼自動補全功能問題!10. css 選擇器 帶有 readonly 屬性 的<input> 怎么定位呢?
