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.mfbz.cn/a/221230.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构之插入排序

目录 前言 插入排序 直接插入排序 插入排序的时间复杂度 希尔排序 前言 在日常生活中&#xff0c;我们不经意间会遇到很多排序的场景&#xff0c;比如在某宝&#xff0c;某东上买东西&#xff0c;我们可以自己自定义价格是由高到低还是由低到高&#xff0c;再比如在王者某…

机器连接和工业边缘计算

软件应用和IT创新是制造业投资的主要驱动力。解决方案架构应围绕特定标准进行整合&#xff0c;并采用架构蓝图和最佳实践来满足最终用户的需求。此外&#xff0c;边缘计算&#xff08;Edge Computing&#xff09;也将在制造业中加速部署。 边缘计算是制造业的下一个变革驱动力。…

设计模式篇之创建型模式

目录 前言一、简单工厂模式二、工厂方法模式总结 前言 最近开始整理Java设计模式&#xff0c;本篇主要分享设计模式中的创建型模式&#xff0c;并给出demo代码&#xff0c;适合初中级开发学习。分享书籍《大话设计模式》&#xff0c;分享GitHub学习设计模式仓库。 一、简单工厂…

Zookeeper(服务注册中心)安装以及启动服务

概述 ZooKeeper是一个分布式的开源协调服务&#xff0c;用于管理和协调大规模分布式系统中的各种任务。它提供了一个简单的分层命名空间&#xff0c;以及对数据的强一致性&#xff08;ACID特性&#xff09;和高可用性的支持。 ZooKeeper提供了一个类似文件系统的层次结构&…

智能优化算法应用:基于混沌博弈算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于混沌博弈算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于混沌博弈算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.混沌博弈算法4.实验参数设定5.算法结果6.参考…

从零开始的Spring Cloud Gateway指南:构建强大微服务架构

目录 一、 什么是Gateway&#xff1f;1. 网关的由来2. 网关的作用3. 网关的技术实现 二、如何搭建一个简易网关服务1. 引入依赖2. 配置yml文件 三、进阶话题&#xff1a;过滤器和路由配置1. gateway的执行原理2. 路由断言工厂: Predicate Factory3. 网关过滤器&#xff1a;Gate…

UE Windows平台下Linux的交叉编译项目打包

UE Windows平台下Linux的交叉编译项目打包 交叉编译&#xff08;Cross-compilation&#xff09; 使得在以Windows为中心的工作流程中工作的游戏开发者能够以Linux为目标对项目进行打包。目前&#xff0c;只有Windows支持交叉编译。 交叉编译支持的平台 Windows | Linux-x86_…

java8 常用code

文章目录 前言一、lambda1. 排序1.1 按照对象属性排序&#xff1a;1.2 字符串List排序&#xff1a;1.3 数据库排序jpa 2. 聚合2.1 基本聚合&#xff08;返回对象list&#xff09;2.2 多字段组合聚合&#xff08;直接返回对象list数量&#xff09; 二、基础语法2.1 List2.1.1 数…

附录B 存储次层次结构回顾

1. 引言 缓存是指地址离开处理器后遇到的最高级或第一级存储器层次结构。 如果处理器在缓存中找到了所请求的数据项&#xff0c;就说发生了缓存命中。如果处理器没有在缓存中找到所请求的数据项&#xff0c;就说发生了缓存缺失。此时&#xff0c;包含所请求的字的固定大小的数…

五年制专转本经验分享

五年制专转本经验分享 提早设定学习目标&#xff0c;会让你努力更有方向&#xff01;同学们在大一、大二时不要以为专转本离你还很远&#xff0c;时际上根据我们十多年的培训经验来说&#xff0c;专转本备考越早准备越有利于通过&#xff01;大家知道英语科目的话&#xff0c;在…

LeetCode437.路径总和III

看完题目我就拿直接用递归写了如下代码&#xff1a; class Solution {private int ans;public int pathSum(TreeNode root, int targetSum) {ans 0;dfs(root, targetSum, 0);return ans;}public void dfs(TreeNode root, int targetSum, int sum){if(root null)return;sum r…

Python中判定列表是否包含某个元素的方法

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;我是彭涛&#xff0c;今天为大家分享 Python中判定列表是否包含某个元素的方法&#xff0c;全文4000字&#xff0c;阅读大约10分钟。 在Python编程中&#xff0c;判定一个列表是否包含特定元素是一项常见任务。本…

界面控件DevExpress WPF导航组件,助力升级应用程序用户体验!(上)

DevExpress WPF的Side Navigation&#xff08;侧边导航&#xff09;、TreeView、导航面板组件能帮助开发者在WPF项目中添加Windows样式的资源管理器栏或Outlook NavBar&#xff08;导航栏&#xff09;&#xff0c;DevExpress WPF NavBar和Accordion控件包含了许多开发人员友好的…

Apache或Nginx在Linux上配置虚拟主机

在Linux上使用Apache或Nginx配置虚拟主机可以让您在同一台服务器上托管多个网站。这样不仅可以充分利用服务器资源&#xff0c;还能降低每个网站的运营成本。以下是使用Apache和Nginx配置虚拟主机的步骤。 使用Apache配置虚拟主机 安装Apache服务器软件。在终端中使用以下命令…

『亚马逊云科技产品测评』活动征文|基于亚马逊EC2云服务器配置Nginx静态网页

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 亚马逊EC2云服务器&#xff08;Elastic Compute Cloud&#xff09;是亚马…

JSON 语法详解:轻松掌握数据结构(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

金融科技走向 Web3 的趋势不可逆转——新加坡金融科技节会后总结(上)

11 月 15 日至 17 日&#xff0c;2023 年度新加坡金融科技节&#xff08;Singapore FinTech Festival&#xff0c;以下简称 SFF&#xff09;在樟宜机场附近的新加坡会展中心&#xff08;Singapore Expo&#xff09;举办。我本人受新加坡金管局的邀请&#xff0c;第一次亲身参与…

百度APP iOS端包体积50M优化实践(七)编译器优化

一. 前言 百度APP iOS端包体积优化系列文章的前六篇重点介绍了包体积优化整体方案、图片优化、资源优化、代码优化、无用类优化、HEIC图片优化实践和无用方法清理&#xff0c;图片优化是从无用图片、Asset Catalog和HEIC格式三个角度做深度优化&#xff1b;资源优化包括大资源…

制作一个RISC-V的操作系统四-嵌入式开发介绍

文章目录 什么是嵌入式开发交叉编译查看一些GCC文件夹 调试器GDB相关语法命令 模拟器QEMUQEMU的安装和使用项目构造工具MakeMakeFile的构成make的运行 练习4-1联系4-2练习4-3 什么是嵌入式开发 程序跑到开发板上&#xff0c;或者说运行到硬件上 交叉编译 简单理解交叉编译来说…

(2/2)敏捷实践指南 Agile Practice Guide ([美] Project Management institute 著)

附录 A1 - 《PMBOK指南》映射 表A1显示了第六版《PMBOK指南》中定义的项目管理过程组与知识领域之间的对应关系 本附录说明了如何利用混合和敏捷方法处理《PMBOK指南》知识领域&#xff08;请参见表A1-2&#xff09;中所述的属性&#xff0c;其中涵盖了相同和不同的属性&…
最新文章