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将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
PHP下对数组进行排序的函数
2010/08/08 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
化工专业应届生求职信
2013/11/08 职场文书
教师远程培训感言
2014/03/06 职场文书
五年级学生评语
2014/04/22 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
新郎新娘答谢词
2015/01/04 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android
nginx rewrite功能使用场景分析
2022/05/30 Servers