html5 冒号分隔符对齐的实现

!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>
    

效果：

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！