您的位置:首页技术文章
文章详情页

html - css 如何让文字标题显示在边框上?

【字号: 日期:2023-07-03 09:13:22浏览:60作者:猪猪

问题描述

如图,如何让文字标题显示在边框上?

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>

标签: HTML
相关文章: