html5 冒号分隔符对齐的实现

前端  /  管理员 发布于 7年前   459

代码：

<!DOCTYPE html>
<html>
<head>    
    <meta charset="utf-8">    
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">    
    <title>冒号对齐</title>      
    <style>        
    .parent{display:flex}        
    .left{width:50%}        
    .left 
    div{text-align: right;}    
    </style>
</head>
<body>
<div class='parent'>   
    <div class="left">        
        <div><span>姓名：</span>        </div>        
        <div><span>性别：</span>        </div>        
        <div><span>年龄：</span>        </div>        
        <div><span>居住地：</span>        </div>        
        <div><span>电话号码：</span>        </div>    
    </div>    
    <div class="right">        
        <div><span>张三风</span>        </div>        
        <div><span>男</span>        </div>        
        <div><span>11</span>        </div>        
        <div><span>武当山</span>        </div>        
        <div><span>13900004444</span>        </div>    
    </div>  
</div>  
</body>
</html>

效果：



    
    
    
冒号对齐      




   

        

姓名：        
        

性别：        
        

年龄：        
        

居住地：        
        

电话号码：        
    

    

        

张三风        
        

男        
        

11        
        

武当山        
        

13900004444

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


  • 上一条：
    用Javascript正则实现url链接的解析类
    下一条：
    Lua教程（二十）：Lua调用C函数

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客