flex布局制作导航两边的线条

最新推荐文章于 2022-07-16 10:10:17 发布

yyrSun

最新推荐文章于 2022-07-16 10:10:17 发布

阅读量931

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/yyjourney/article/details/78134042

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

做页面模块的时候，会遇到以标题分割线结合的导航条，现在就利用flex布局制作。

html代码

<div class="main">
    <div class="line"></div>
    <div class="text">导航标题</div>
    <div class="line"></div>
</div>

css代码：

     *{
            margin:0;
            padding:0;
        }
        .main{
            display: flex;
            width: 80%;
            margin: 30px auto;
            border:1px solid red;
        }
        .line{
            flex: 1;
            position: relative;
            top:-6px;
            border-bottom:1px solid #cfcfcf;

        }
        .text{
            padding: 0 12px;
            font-size:14px;
        }