css实现姓名两端对齐

1.1 效果

在这里插入图片描述

1.2 主要代码

text-align-last: justify; 

1.3 html完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style scoped>.user_info {width: 50px;text-align-last: justify; }</style></head>
<body><div><div class="user_info">姓名</div></div><div><div class="user_info">身份证</div></div></body>
</html>

1.4 以 js 的方式插入 css 样式

  • 我是在大屏幕中使用的,因为通过类名一直获取不到姓名这段html,所以就找到了最初始获取姓名这个数据的地方。
  • 直接在姓名这个数据渲染前以模板字符串的方式插入样式。
person.patientName = `<div style="width:3em;text-align-last:justify;">${person.patientName}</div>`

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/198286.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue 生成包含数字大小写字母的随机字符串

generateRandomID() {const characters 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ;const idLength 30; // 字符串长度 这里生成30位的let randomID ;for (let i 0; i < idLength; i) {const randomIndex Math.floor(Math.random() * characters…

数学建模-二氧化碳排放及时空分布测度

二氧化碳排放及时空分布测度 整体求解过程概述(摘要) 面临全球气候变化的巨大挑战&#xff0c;我国积极响应《巴黎协定》的号召&#xff0c;提出“2030年前碳达峰&#xff0c;2060 年前实现碳中和”的碳排放发展目标&#xff0c;并将碳中和相关工作作为 2021 年的重点任务之一…

吉客云与金蝶云星辰业财一体化数据集成

吉客云与金蝶云星辰业财一体化数据集成为例&#xff0c;探讨如何利用轻易云数据集成平台高效整合企业系统。金蝶云星辰在供应链和财务管理方面具有显著优势&#xff0c;而吉客云则专注于订单处理和发货。两者的协同运作&#xff0c;是企业数字化转型的典型案例。 二、集成总体蓝…

python-学生管理|汉罗塔

1.编写程序&#xff0c;实现学生信息管理系统。 运行程序&#xff0c;在控制台输入“1”之后的结果如下所示&#xff1a; 学生管理系统 1.添加学生信息 2.删除学生信息 3.修改学生信息 4.显示所有学生信息 0.退出系统 请选择功能&#xff1a;1 请输入新学生的姓名:小红 请输入…

排序算法:n个0~1000之间的整数,将他们从大到小排序

上榜理由&#xff1a; 如果没见过这种排序题&#xff0c;可能首先想到的就是常用的排序算法&#xff0c;比如快速排序&#xff0c;归并排序&#xff0c;那如果输入的n足够大&#xff0c;时间复杂度肯定比较高。其实题目0-1000的范围是一个题眼&#xff0c;所以一定有更优的排序…

商务助理个人简历10篇

商务助理简历模板下载&#xff08;可在线编辑制作&#xff09;&#xff1a;来幻主简历&#xff0c;做好简历&#xff01; 商务助理简历1&#xff1a; 求职意向 求职类型&#xff1a;全职 意向岗位&#xff1a;国际商务、产品助理 意向城市&#xff1a;广东广州 …

ElasticSearch篇---第一篇

系列文章目录 文章目录 系列文章目录前言一、谈谈分词与倒排索引的原理二、说说分段存储的思想三、谈谈你对段合并的策略思想的认识前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分…

【每日一题】确定两个字符串是否接近

文章目录 Tag题目来源题目解读解题思路与实现方法一&#xff1a;计数 其他语言python3 写在最后 Tag 【计数】【字符串】 题目来源 1657. 确定两个字符串是否接近 题目解读 你可以进行以下两种操作&#xff1a; 操作 1&#xff1a;交换任意两个位置的字符&#xff1b;操作 …

浪涌保护器参数指南:浪涌保护器行业选型方案

浪涌保护器&#xff08;SPD&#xff09;是一种用于限制瞬态过电压和泄放浪涌电流的器件&#xff0c;可有效降低电子设备在雷击、电源故障等情况下受到的损害。其主要作用是当系统发生浪涌时&#xff0c;将过电压、过电流泄放到大地&#xff0c;从而保护设备和人身安全。然而浪涌…

什么是Amazon Lambda(无服务器计算服务)

Lambda 在高可用性计算基础设施上运行代码&#xff0c;用于执行计算资源的所有管理工作。这包括服务器和操作系统维护、容量调配和弹性伸缩、代码和安全补丁部署以及代码监控和日志记录。您只需要提供代码。 最近亚马逊云服务提供了超多免费的云服务&#xff0c;快来领取免费套…

【设计模式】单例模式代码设计

目录 单例模式简介饿汉单例模式懒汉单例模式线程安全的懒汉单例模式 橙色 详细可参考该篇文章&#xff1a;C设计模式 - 单例模式 单例模式简介 单例模式指的是&#xff0c;无论怎么获取&#xff0c;永远只能得到该类类型的唯一一个实例对象&#xff0c;那么设计一个单例就必须…

聊聊部署在不同K8S集群上的服务如何利用nginx-ingress进行灰度发布

前言 之前有篇文章聊聊如何利用springcloud gateway实现简易版灰度路由,里面的主人公又有一个需求&#xff0c;他们有个服务是没经过网关的&#xff0c;而是直接通过nginx-ingress暴露出去&#xff0c;现在这个服务也想做灰度&#xff0c;他知道在同个集群如何利用nginx-ingre…

Git 分支合并时 Merge, Rebase, Squash 的使用场景

前言 Git 的分支设计大大提升了并行开发的能力&#xff0c;但相应的&#xff0c;也就要解决如何进行分支合并。毕竟分久必合&#xff0c;最终还是要把大家的工作合并起来&#xff0c;进行统一发布的。在合并时&#xff0c;通常有三种操作&#xff1a; Merge commitsRebaseSqu…

Vue学习计划--Vue2(二)Vue代理方式

Vue data中的两种方式 对象式 data:{}函数式 data(){return {} }示例&#xff1a; <body><div id"app">{{ name }} {{ age}} {{$options}}<input type"text" v-model"value"></div><script>let vm new Vue({el: …

Linux操作系统之wget下载软件并安装

文章目录 前言一、apt下载二、wget下载1、新建目录存放文件2、根据下载地址使用wget下载安装包3、解压包4、命令指定目录&#xff0c;让其生效如有启发&#xff0c;可点赞收藏哟~ 前言 一般安装可以直接使用apt命令&#xff0c;不过安转的不是最新版本的&#xff0c;且没法指定…

驱动开发--内核添加新功能

Ubuntu下这个文件为开发板ls命令的结果 内核的内容&#xff1a; mm&#xff1a;内存管理 fs&#xff1a;文件系统 net&#xff1a;网络协议栈 drivers&#xff1a;驱动设备 arch与init&#xff1a;跟启动相关 kernel与ipc&#xff1a;任务&#xff0c;进程相关 向内核增…

Depop自养号下单教程,测评环境、IP与买家资料的关键

Depop是一家总部位于英国伦敦的在线时尚市场和社交媒体平台。该平台于2011年由Simon Beckerman创立&#xff0c;旨在提供一个结合了时尚、创意和社交互动元素的独特购物体验。Depop已经发展成为一个备受欢迎的时尚社交应用&#xff0c;吸引了全球范围内的卖家和购物者。提供了一…

一文读懂3D开发工具HOOPS SDK

前言 Tech Soft 3D是全球领先的3D领域开发工具提供商&#xff0c;可帮助软件团队交付成功的应用程序。Tech Soft 3D成立于1996年&#xff0c;该公司的工具包产品为全球数亿台计算机上运行的近500个独特应用程序提供支持&#xff0c;已经助力SolidWorks、AutoDesk、GrabCAD、CD…

kafka 3.x 学习笔记

kafka 3.x 学习笔记 在 kafka 2.8.0 版本之前&#xff0c;安装使用 kafka 需要配套安装 zookeeper&#xff0c;但在 2.8.0 版本之后&#xff0c;不再需要安装 zookeeper&#xff0c;本次学习笔记采用的 kafka 版本为 3.0.0。 文章目录 kafka 3.x 学习笔记一、kafka 定义1 什么是…

任务管理器快捷键分享!这些知识很有用!

“我刚学习使用电脑没多久&#xff0c;想问问大家任务管理器这个功能有什么用处呀&#xff1f;在使用任务管理器时有什么快捷键能快速进入吗&#xff1f;感谢解答&#xff01;” 在日常使用电脑的过程中&#xff0c;我们经常需要打开任务管理器来进行一些操作。而掌握任务管理器…