如图，如何让文字标题显示在边框上？
闭关修行中......
<fieldset> <legend>【使用方法】</legend> </fieldset>
如果需要更精确的扩展，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 class="box" title="使用方法"> <ol> <li>这是啥</li> <li>干啥</li> </ol> </p>
<!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>
提供一种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>
随便想了一下，凑合着用吧http://codepen.io/colahan/pen...
不太建议使用fieldset，一般都会被reset的
绝对定位加文字定宽高
很明显是绝对定位呀
<style> h2:before, h2:after { content: ""; display: inline-block; vertical-align:middle; width: 100px; border-top: 1px solid #123456; } </style> <h2>线标题</h2>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
如果需要更精确的扩展，fieldset的效果不好，还自己实现一个吧，如下：
提供一种hacked方法：
style:
html:
随便想了一下，凑合着用吧
http://codepen.io/colahan/pen...
不太建议使用fieldset，一般都会被reset的
绝对定位加文字定宽高
很明显是绝对定位呀