您的位置：首页 > 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 冒号分隔符对齐的实现）

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

标签：HTML5 冒号分隔符

上一篇：dedecms快速建站（Dedecms 生成静态页面速度优化方法）

下一篇：dedecms调用方法（DEDECMS专题制作方法）

您可能感兴趣

html5的占位符（html5 冒号分隔符对齐的实现）

html5的占位符

热门推荐

排行榜