小标题两侧加横线或背景图片自适应布局实现技巧

方法一：使用背景图

html结构：

<div class="tit-bar"> <div class="deg">满意度调查</div> </div>

css结构：

.tit-bar{ background:url(../img/line-bg.png) repeat-x center; margin:0 auto; padding:5px 0; } .tit-bar .deg{ font-size:16px; width:5rem; text-align: center; background-color: #fff; margin:0 auto; color:#ca4b29; font-weight:700; background: #fff url(../img/smile.png) no-repeat 7px center; height: 60px; line-height: 60px; background-size: 30px 30px; padding-left: 30px; }

方法二：使用伪类

html结构：

<div class="tit-bar"> <div class="deg">满意度调查</div> </div>

css结构：

.tit-bar .deg { width:100%; font-size: 16px; color: #555; margin: 0 auto; position: relative; text-align: center } .tit-bar .deg::before { content: ""; border-top: 1px solid #ccc; display: block; position: absolute; width: 40%; top: 10px; left: 0 } .tit-bar .deg::after { content: ""; border-top: 1px solid #ccc; display: block; position: absolute; width: 40%; top: 10px; right: 0 }