PHP中文网2017-04-17 11:51:52
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>
ringa_lee2017-04-17 11:51:52
<!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>
PHPz2017-04-17 11:51:52
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>
迷茫2017-04-17 11:51:52
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
巴扎黑2017-04-17 11:51:52
<style>
h2:before, h2:after {
content: "";
display: inline-block;
vertical-align:middle;
width: 100px;
border-top: 1px solid #123456;
}
</style>
<h2>线标题</h2>