html - css 如何讓文字標(biāo)題顯示在邊框上？
問題描述
如圖，如何讓文字標(biāo)題顯示在邊框上？
問題解答
回答1：<fieldset> <legend>【使用方法】</legend> </fieldset>回答2：
如果需要更精確的擴(kuò)展，fieldset的效果不好，還自己實(shí)現(xiàn)一個(gè)吧，如下：
<style> .box{position:relative;border:1px solid red; } .box::before{content:attr(title);position:absolute;left:50%;transform:translateX(-50%);-webkit-transform:translate(-50%,-50%);padding:0 10px;background-color:#fff; }</style><p > <ol><li>這是啥</li><li>干啥</li> </ol></p>回答3：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body><fieldset> <legend style='text-align: center'>【使用方法】</legend></fieldset></body></html>回答4：
提供一種hacked方法：
style:
p { width: 400px; height: 200px; border: 1px solid #ccc; } p h1 { height: 20px; margin: -10px auto 0; font-size: 14px; padding: 0 10px; text-align: center; width: 50px; }
html:
<p> <h1>嘿嘿嘿</h1> </p>回答5：
隨便想了一下，湊合著用吧http://codepen.io/colahan/pen...
不太建議使用fieldset，一般都會(huì)被reset的
回答6：絕對(duì)定位加文字定寬高
回答7：很明顯是絕對(duì)定位呀
回答8：<style> h2:before, h2:after {content: '';display: inline-block;vertical-align:middle;width: 100px;border-top: 1px solid #123456; }</style><h2>線標(biāo)題</h2>
相關(guān)文章：
1. mysql 可以從 TCP 連接但是不能從 socket 鏈接2. java - jdbc如何返回自動(dòng)定義的bean3. javascript - 按鈕鏈接到另一個(gè)網(wǎng)址 怎么通過百度統(tǒng)計(jì)計(jì)算按鈕的點(diǎn)擊數(shù)量4. mysql updtae追加數(shù)據(jù)sql語句5. 怎么php怎么通過數(shù)組顯示sql查詢結(jié)果呢，查詢結(jié)果有多條，如圖。6. Python處理Dict生成json7. 大家都用什么工具管理mysql數(shù)據(jù)庫？8. python - 請(qǐng)問這兩個(gè)地方是為什么呢？9. 請(qǐng)教一個(gè)mysql去重取最新記錄10. mysql的循環(huán)語句問題
網(wǎng)公網(wǎng)安備