小标题自适应经典flex布局实现

html代码:

  <div class="title-wrapper">
    <div class="line"></div>
    <div class="text">优惠信息</div>
    <div class="line"></div>
  </div>

css代码:

.title-wrapper
   display: flex
   width: 80%
   margin: 28px auto 24px auto
   .line
     flex: 1
     position: relative
     top: -6px
     border-bottom: 1px solid rgba(255, 255, 255, 0.2)
   .text
     margin: 0 12px 0 12px
     font-size: 14px
     font-weight: 700

这里写图片描述

猜你喜欢

转载自blog.csdn.net/SilenceJude/article/details/82219463