CSS单行、同行文本左右对齐

再项目需求中,UI小姐姐常常要考虑项目的排版样式更简洁高级,常常会在项目设置内容或者字体两端对齐的效果,比如,在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地等。

针对这种排版,因为字数不确定,所以我们不好设置固定距离,但是正好css的样式里有一个text-align设置内容对齐,并且有一个是正好设置两端对齐text-align: justify,正中下怀,其实现的效果就是可以让文字两端对齐显示,但是使用也有bug,

(1) text-align:justify 不处理强制打断的行,也不处理块内的最后一行。通俗一点讲,就是只有一行显示的时候这个属性是不起作用的,或者使用了word-break: break-all;这种强制换行的属性,也是不起作用的。

(2) 如果内容是多于一行的时候,除了最后一行,都是两端对齐的效果。

总结就是(文字内容要超过一行,最后一行没有两端对齐效果),但是表单的内容就是一排要两端对齐,咋整嘞? 各位小伙伴不要着急,我们当然也有很好的解决方法!!

1、方法一 在内容中添加一个用于占位的标签,让内容处于第一行,就能达到效果

html 结构<ul><li>用户名<p class="box"></p></li><li>账号<p class="box"></p></li><li>验证码<p class="box"></p></li></ul>css 样式<style>ul li{width: 100px;border: 1px solid red;text-align: justify;height: 24px;list-style: none;}.box{display: inline-block;width: 100%;}</style>

 2、方法二:使用:after伪元素(ie7及以下不支持伪类)

html结构<ul><li>用户名</li><li>账号</li><li>验证码</li></ul>css 样式<style>ul li{width: 100px;border: 1px solid red;text-align: justify;height: 24px;list-style: none;}li::after{content: "";display: inline-block;width: 100%;}</style>

 前两种方法,原理差不多,但是inline-block盒子会导致下面会多出空白,这时就只有设置 li 的高度,比如给 li 添加 height: 40px;line-height: 40px;

3、方法三:使用 text-align-last:justify 属性

html 结构<ul><li>用户名</li><li>账号</li><li>验证码</li></ul>css 样式ul li{width: 100px;border: 1px solid red;text-align: justify;text-align-last: justify;/* 设置最后一行内容两端对齐 */height: 24px;list-style: none;}

 这种解决方法看起来很不错,也很简单,但是text-align-last:justify 这个属性的兼容性不好,在谷歌、火狐浏览器上能正确显示,但是在其它浏览器中却没效果。因为大部分浏览器要使得两端对齐生效,需在文本间插入空白,如空格。

4、方法四 兼容多种浏览器的终极兼容方法

html 结构<ul><li>用 户 名</li><li>账 号</li><li>验 证 码</li></ul>css 样式<style>ul li{width: 100px;border: 1px solid red;text-align: justify;text-align-last: justify;/* 设置最后一行内容两端对齐 */height: 24px;list-style: none;}li{content: "";display: inline-block;width: 100%;}</style>

注意每个单词之间都有空格,这个很重要,很重要,很重要,而且只需一个空格就行,多个空格也不影响。如果没有这个空格,兼容性很差,基本只有谷歌和火狐支持,这个方法兼容ie7及以上,还有其它的浏览器基本都支持。

再来看看页面的显示效果:

主打一下整齐:

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

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

相关文章

0406 组合放大电路

组合放大电路 共射-共基放大电路共集-共集放大电路 4.6.1 共射—共基放大电路 4.6.2 共集—共集放大电路 共射-共基放大电路 共集-共集放大电路 (a) 原理图 (b)交流通路 T1、T2构成复合管&#xff0c;可等效为一个NPN管

Docker搭建mysql性能测试环境

OpenEuler使用Docker搭建mysql性能测试环境 一、安装Docker二、docker安装mysql三、测试mysql连接 一、安装Docker 建立源文件vim /etc/yum.repos.d/docker-ce.repo增加内容[docker-ce-stable] nameDocker CE Stable - $basearch baseurlhttps://repo.huaweicloud.com/docker…

android GridLayout 布局详解,并举例

GridLayout 是 Android 中的一个布局容器&#xff0c;它允许你在一个二维网格中排列子视图。你可以指定网格的行数和列数&#xff0c;或者让 GridLayout 自动计算它们。每个子视图都可以占据一个或多个网格单元格。GridLayout 非常适合在需要创建规则网格的应用中使用&#xff…

【Power Compiler手册】1.工具介绍

第一部分: Power Compiler概念 以下是对Power Compiler工具的介绍主题: • Power Compiler工具介绍 • Power Compiler设计流程 • 电源建模和计算 1.Power Compiler工具介绍 Power Compiler工具是Synopsys Design Compiler综合工具家族的一部分。该工具执行寄存器传输级…

探索并发编程

引言 在现代软件开发中&#xff0c;尤其是面对高性能、高并发需求的应用场景&#xff0c;Java的并发编程能力显得尤为重要。Java提供了丰富的API和框架来支持开发者构建高效、可靠的多线程应用程序。本文将深入探讨Java并发编程的核心概念&#xff0c;重点讲解线程池的使用、F…

OpenAI、微软、智谱AI 等全球 16 家公司共同签署前沿人工智能安全承诺

人工智能&#xff08;AI&#xff09;的安全问题&#xff0c;正以前所未有的关注度在全球范围内被讨论。 日前&#xff0c;OpenAI 联合创始人、首席科学家 Ilya Sutskever 与 OpenAI 超级对齐团队共同领导人 Jan Leike 相继离开 OpenAI&#xff0c;Leike 甚至在 X 发布了一系列…

webpack5零基础入门-15样式兼容性问题处理

1.下载相关依赖 npm i postcss-loader postcss postcss-preset-env -D 2.在webpack.config.js中配置 注意&#xff1a;postcss-loader要在css-loader后面配置 3.写一个flex布局&#xff0c;flex是存在一定的兼容性问题的 4.打包 可以看到打包后未被处理 1.下载相关依赖 np…

MySQL 查询某个字段含有字母数字的值

在数据库管理中&#xff0c;常常需要查询某个字段包含特定类型数据的记录。本文将详细介绍如何在 MySQL 中查询某个字段含有字母和数字的值&#xff0c;并提供至少五个具体示例&#xff0c;帮助您更好地理解和应用这些查询方法。 1. 概述 在 MySQL 中&#xff0c;使用正则表达…

YOLOv8绘制map曲线图

yolov8源码绘制的map曲线图不够清晰&#xff0c;python代码绘制的曲线图导入word之后清晰度也不够高&#xff0c;所以选择使用matlab来绘制曲线图&#xff0c;matlab可以直接复制图窗到word中&#xff0c;在转换成pdf也不会失真。点击编辑&#xff0c;复制图窗即可复制到word中…

MySQL + JPA 动态条件查询

maven 依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId><version>2.3.12.RELEASE</version> </dependency>实体类 package cn.xxx.xxx.project.dal.my…

Aspect打印接口请求信息和返回内容

文章目录 引言I 打印请求信息II 方法参数反序列化异常解决方案1解决方案2引言 2024-05-18 13:43:19.358 [http-nio-5050-exec-1] [58497D6655] INFO - 请求url : http://192.168.20.xx:xxx/userAdmin/login 2024-05-18 13:43:19.358 [http-nio-5050-exec-1]

C - Sigma Problem(AtCoder Beginner Contest 353)

题目的链接: C - Sigma Problem (atcoder.jp) 题目&#xff1a; 样例&#xff1a; 题目大致含意: 给你n个数&#xff0c;让你对这n个数进行操作&#xff0c;比如当前是第i个&#xff0c;那么让a[i] 和 后面的每个数进行相加, 例如a[i] a[i 1] 注意的是a[i] a[i 1]的结果…

linux的用户管理

新建用户&#xff1a;1.useradd 2.passwd 完成的操作&#xff1a; (1)/etc/passwd添加一行 (2)/etc/shadow添加一行 (3)/etc/group添加一行 (4)创建用户家目录 (5)创建用户邮件文件 例&#xff1a;创建用户jerry&#xff0c;要求: uid:777&am…

20240522每日后端---------如何回答面试官的问题

问题 通常面试官会抛出一个问题&#xff0c;比如redis的雪崩&#xff0c;mysql的索引&#xff0c;spring的bean生命周期等等。 一般我们面试时候&#xff0c;当听到面试官问问题&#xff0c;下意识的就会在脑海中搜索答案&#xff0c;但是实际上这是不正确的做法&#xff0c;我…

【git】开发提交规范(feat、fix、perf)

这段时间收到的需求很多&#xff0c;可能是临近两周一次的大版本灰度上线&#xff0c;这次产生了一个关于git的思考&#xff0c;就是各个版本之间怎么管理的问题&#xff0c;这里做出我自己的一些方法。 首先&#xff0c;既然已经明确了remote分支中的release分支为主分支&…

多线程讲解(详解)

目录 什么是多线程&#xff1f; 为什么要使用多线程&#xff1f; 线程的创建 使用Thread实现 从以上代码我们梳理一下多线程创建步骤&#xff1a; 注意&#xff1a; 小示例 首先&#xff0c;引入依赖 然后&#xff0c;按照我们刚刚说的构建多线程的步骤进行构建&#…

Arthas,应用诊断利器!【送源码】

Arthas 是一款线上监控诊断产品&#xff0c;通过全局视角实时查看应用 load、内存、gc、线程的状态信息&#xff0c;并能在不修改应用代码的情况下&#xff0c;对业务问题进行诊断&#xff0c;包括查看方法调用的出入参、异常&#xff0c;监测方法执行耗时&#xff0c;类加载信…

Model-Based Pose Estimation for Rigid Objects(基于SIFT)

6D目标检测工程落地需求的小算力算法&#xff0c;本文具有借鉴意义&#xff0c;但对于特征点少的目标不太好用。 摘要 在多个实际应用中&#xff0c;经常会遇到确定图像中出现的物体姿态的问题。处理这一挑战的最有效策略是按照基于模型的范式进行&#xff0c;这涉及构建物体…

Qt快速入门到熟练(电子相册项目(一))

经过一段时间的学习&#xff0c;相信大家对QT的基本用法都有所了解&#xff0c;从这篇文章开始&#xff0c;我准备记录一下电子相册的项目的一个学习过程。 实现项目创建功能 对于这个电子相册的项目&#xff0c;我并没有在一开始就把所有可能用到的功能模块去事无巨细的考虑周…

通过域名接口申请免费的ssl多域名证书

来此加密已顺利接入阿里云的域名接口&#xff0c;用户只需一键调用&#xff0c;便可轻松完成域名验证&#xff0c;从而更高效地申请证书。接下来&#xff0c;让我们详细解读一下整个操作过程。 来此加密官网 免费申请SSL证书 免费SSL多域名证书&#xff0c;泛域名证书。 首先&a…