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动画技术
Jan 01 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php2html php生成静态页函数
2008/12/08 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
写出高质量的PHP程序
2012/02/04 PHP
PHP开发注意事项总结
2015/02/04 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
python日志记录模块实例及改进
2017/02/12 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
python使用PyQt5的简单方法
2019/02/27 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
python怎么提高计算速度
2020/06/11 Python
农民工工资发放承诺书
2014/03/31 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
政审证明范文
2015/06/19 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS