html5 冒号分隔符对齐的实现


Posted in HTML / CSS onJuly 31, 2019
<!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>

效果:

html5 冒号分隔符对齐的实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 #HTML / CSS
Canvas图片分割效果的实现
Jul 29 #HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 #HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 #HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 #HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 #HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 #HTML / CSS
You might like
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP strripos函数用法总结
2019/02/11 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
Python运行的17个时新手常见错误小结
2012/08/07 Python
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
Python 面向对象部分知识点小结
2020/03/09 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
Python新手学习装饰器
2020/06/04 Python
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
铣床操作工岗位职责
2014/06/13 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
办公室主任岗位职责
2015/01/31 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
SQL CASE 表达式的具体使用
2022/03/21 SQL Server