您的位置:首页 > Web前端 > > 正文

html5的占位符(html5 冒号分隔符对齐的实现)

更多 时间:2021-10-04 01:51:47 类别:Web前端 浏览量:267

html5的占位符

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 li{text-align: right;}
        </style>
    
    </head>
    <body>
    <li class='parent'>
       <li class="left">
            <li>
                <span>姓名:</span>
            </li>
            <li>
                <span>性别:</span>
            </li>
            <li>
                <span>年龄:</span>
            </li>
            <li>
                <span>居住地:</span>
            </li>
            <li>
                <span>电话号码:</span>
            </li>
        </li>
        <li class="right">
            <li>
                <span>张三风</span>
            </li>
            <li>
                <span>男</span>
            </li>
            <li>
                <span>11</span>
            </li>
            <li>
                <span>武当山</span>
            </li>
            <li>
                <span>13900004444</span>
            </li>
        </li>
      </li>
      
    </body>
    </html>
    
    
    
  • 效果:

    html5的占位符(html5 冒号分隔符对齐的实现)

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

    您可能感兴趣