zoukankan      html  css  js  c++  java
  • 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;
    				 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>
    
  • 相关阅读:
    1-6注册View Prism官网案例学习
    MVVM复习
    Prism常用类库翻译
    SqlHelper
    ADO.NET复习
    C#复习思维导图
    网络通信基础知识1
    网络通信
    Linux-线程同步之互斥锁
    linux-线程同步之信号量
  • 原文地址:https://www.cnblogs.com/lml-lml/p/11436173.html
Copyright © 2011-2022 走看看