如图，如何让文字标题显示在边框上？
闭关修行中......
<fieldset> <legend>【使用方法】</legend> </fieldset>
If you need more precise expansion and the effect of fieldset is not good, you can implement one yourself, as follows:
<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>
Provide a hacked method:
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>
I just thought about it and let’s make do with ithttp://codepen.io/colahan/pen...
It is not recommended to use fieldset, it will usually be reset
Absolute positioning plus text width and height
Obviously it’s absolute positioning
<style> h2:before, h2:after { content: ""; display: inline-block; vertical-align:middle; width: 100px; border-top: 1px solid #123456; } </style> <h2>线标题</h2>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
If you need more precise expansion and the effect of fieldset is not good, you can implement one yourself, as follows:
Provide a hacked method:
style:
html:
I just thought about it and let’s make do with it
http://codepen.io/colahan/pen...
It is not recommended to use fieldset, it will usually be reset
Absolute positioning plus text width and height
Obviously it’s absolute positioning