如图，如何让文字标题显示在边框上？
<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>
<div class="box" title="使用方法">
<ol>
<li>这是啥</li>
<li>干啥</li>
</ol>
</div>
<!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:
div {
width: 400px;
height: 200px;
border: 1px solid #ccc;
}
div h1 {
height: 20px;
margin: -10px auto 0;
font-size: 14px;
padding: 0 10px;
text-align: center;
width: 50px;
}
html:
<div>
<h1>嘿嘿嘿</h1>
</div>
随便想了一下，凑合着用吧
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>
4654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
