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 相关文章推荐
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 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 XML操作的各种方法解析(比较详细)
2010/06/17 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP图片水印类的封装
2017/07/06 PHP
php5与php7的区别点总结
2019/10/11 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
Ext grid 添加右击菜单
2009/11/26 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python中pygame模块用法实例
2014/10/09 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
汽车检测与维修专业求职信
2013/10/30 职场文书
商务专员岗位职责
2013/11/23 职场文书
自荐书范文范例
2014/02/13 职场文书
学校食品安全实施方案
2014/06/14 职场文书
教师聘用意向书
2015/05/11 职场文书
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python