实现自适应Title

最新推荐文章于 2024-04-03 11:19:56 发布

南张门

最新推荐文章于 2024-04-03 11:19:56 发布

阅读量466

点赞数

分类专栏： Style 文章标签： flex 自适应标题 title

本文链接：https://blog.csdn.net/haochangdi123/article/details/80814116

版权

Style 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍如何利用Flex布局创建一个自适应标题，标题中间的汉字部分保持固定宽度，两侧线条随着屏幕尺寸的变化而伸缩。通过HTML结构和SCSS样式实现，详细细节可根据需求进行调整。

摘要由CSDN通过智能技术生成

实现这样的标题：
中间汉字部分固定宽度，两边的线随屏幕大小变化
这里写图片描述
HTML：

<div class="title">
 <div class="line"></div>
  <div class="text">标题</div>
  <div class="line"></div>
</div>

对应的scss：

 .title {
  display: flex;
   width: 80%;
   margin: 28px auto 24px;
   .line {
     flex: 1;
     position: relative;
     top: -6px;
     border-bottom: 1px solid rgba(255, 255, 255, .2);
   }
   .text {
     padding: 0 10px;
     font-size: 14px;
     font-weight: 700;
   }
 }