css实现中间横线俩边文字效果

时间:2019-08-30
本文章向大家介绍css实现中间横线俩边文字效果，主要包括css实现中间横线俩边文字效果使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>     
            .menu-list {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 600px;
                flex: 1;
            }
        </style>
    </head>

    <body>
        <div class="menu-list">
            <div>猪肉大葱饺子</div>
            <hr style="border-top:1px dashed #000; height:1px;flex:1">
            <div>10元</div>
        </div>
        <div class="menu-list">
            <div>鸡蛋水饺</div>
            <hr style="border-top:1px dashed #000; height:1px;flex:1">
            <div>10元</div>
        </div>
        <div class="menu-list">
            <div>土豆丝</div>
            <hr style="border-top:1px dashed #000; height:1px;flex:1">
            <div>10元</div>
        </div>
        <div class="menu-list">
            <div>宫保鸡丁</div>
            <hr style="border-top:1px dashed #000; height:1px;flex:1">
            <div>10元</div>
        </div>
    </body>e
</html>

原文地址：https://www.cnblogs.com/lml-lml/p/11436173.html

随机文章
WEB前端知识点必读
最近更新