html - css 如何让文字标题显示在边框上？
问题描述
如图，如何让文字标题显示在边框上？
问题解答
回答1：<fieldset> <legend>【使用方法】</legend> </fieldset>回答2：
如果需要更精确的扩展，fieldset的效果不好，还自己实现一个吧，如下：
<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，一般都会被reset的
回答6：绝对定位加文字定宽高
回答7：很明显是绝对定位呀
回答8：<style> h2:before, h2:after {content: '';display: inline-block;vertical-align:middle;width: 100px;border-top: 1px solid #123456; }</style><h2>线标题</h2>
相关文章：
1. javascript - 我是做web前端的，公司最近有一个项目关于数据统计的！2. javascript - 网页中嵌套iframe，网页和iframe viewport不同，怎么能让iframe中的网页不变形3. 如何提高python查询速度？4. node.js - node中MYSQL的异步问题5. javascript - 微信 H5 授权 返回键6. node.js - session怎么存到cookie，然后服务器重启后还能获取。数据库不用mongodb或redis，数据库是mysql7. MySQL主键冲突时的更新操作和替换操作在功能上有什么差别(如图)8. angular.js使用$resource服务把数据存入mongodb的问题。9. index.php错误，求指点10. Thinkphp 下载地址找不到了？
网公网安备