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

news2024/12/23 17:48:02

再项目需求中,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.coloradmin.cn/o/1684940.html

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

相关文章

分布式音乐播放器适配了Stage模型

OpenAtom OpenHarmony&#xff08;以下简称“OpenHarmony”&#xff09;应用开发自API 8及其更早版本一直使用的是FA模型进行开发。FA模型是Feature Ability的缩写&#xff0c;它和PA&#xff08;Particle Ability&#xff09;两种类型是过往长期推广的术语&#xff0c;深入人心…

flannel详细介绍

一、前言 Flannel 是一个简单、高效的容器网络解决方案&#xff0c;适用于需要在多个主机上运行容器的场景。它通过虚拟网络技术和 IP 地址管理来实现容器之间的通信和跨主机连接&#xff0c;为容器平台提供了可靠的网络基础设施&#xff0c;flannel有三种模式&#xff0c;分别…

【OceanBase诊断调优】—— 直连普通租户时遇到报错:Tenant not in this server

本文介绍了直连 OceanBase 数据库中的普通租户时&#xff0c;出现报错&#xff1a;ERROR 5150 (HY000) : Tenant not in this server 的处理方法。 问题描述 在 n-n 或者 n-n-n (n>1) 的部署架构中&#xff0c;使用 2881 端口 直连 OceanBase 集群的普通租户&#xff0c;可…

Vue2基础及其进阶面试(一)

简单版项目初始化 新建一个vue2 官网文档&#xff1a;介绍 — Vue.js 先确保下载了vue的脚手架 npm install -g vue-cli npm install -g vue/cli --force vue -V 创建项目 vue create 自己起个名字 选择自己选择特性 选择&#xff1a; Babel&#xff1a;他可以将我们写…

华院计算 | 简单而复杂的“生命游戏”

人类是社会动物&#xff0c;而人类的社会活动则既简单又复杂。长期以来&#xff0c;数学家、计算机科学家和社会学家们一直试图用简单明了的方式方法去刻画错综复杂的社会现象&#xff0c;其中“生命游戏”提供了一个“寓科学于娱乐”的活动框架。 【一】导引 让我们先来玩一…

接口自动化测试Requests库实战超细详解

一、requests库 Requests is an elegant and simple HTTP library for Python, built for human beings. Requests库就是一个使用Python语言发送HTTP请求的一个类库。 github地址&#xff1a;GitHub - psf/requests: A simple, yet elegant, HTTP library. 中文地址&#xff…

【华为】将eNSP导入CRT,并解决不能敲Tab问题

华为】将eNSP导入CRT&#xff0c;并解决不能敲Tab问题 eNSP导入CRT打开eNSP&#xff0c;新建一个拓扑右键启动查看串口号关联CRT成功界面 SecureCRT连接华为模拟器ensp,Tab键不能补全问题选择Options&#xff08;选项&#xff09;-- Global Options &#xff08;全局选项&#…

民国漫画杂志《时代漫画》第6期.PDF

时代漫画06.PDF: https://url03.ctfile.com/f/1779803-1247397790-72c351?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps:资源来源网络&#xff01;

MySQL慢查询原因总结

文章目录 一.SQL没加索引二. SQL 索引不生效2.1 隐式的类型转换&#xff0c;索引失效2.2 查询条件包含or&#xff0c;可能导致索引失效2.3 like通配符可能导致索引失效2.4 查询条件不满足联合索引的最左匹配原则2.5 在索引列上使用mysql的内置函数2.6 对索引进行列运算&#xf…

低耦合双写一致性方案-使用canal+MQ

需求&#xff1a;继上一篇使用xxljob实现数据的全量同步到es后&#xff0c;当数据库中新增、删除、修改数据时&#xff0c;应该对es中的对应索引库实现增量同步。 本文介绍了2种双写一致性方案&#xff0c;对其中使用MQ的方案进行了实现。 1. 方案设计 1.1 数据一致性问题分析…

QT7_视频知识点笔记_5_线程,数据库

多线程 两种办法&#xff1a;第一种&#xff1a;Qt4.7之前的线程使用的方法&#xff08;简单&#xff09;&#xff1b;第二种&#xff1a;Qt4.7之后的&#xff08;灵活–推荐&#xff09;----connect最后一个参数的作用&#xff1a;默认连接&#xff0c;队列连接&#xff0c;直…

vue3使用mitt.js进行各种组件间通信

我们在vue工程中&#xff0c;除开vue自带的什么父子间&#xff0c;祖孙间通信&#xff0c;还有一个非常方便的通信方式&#xff0c;类似Vue2.x 使用 EventBus 进行组件通信&#xff0c;而 Vue3.x 推荐使用 mitt.js。可以实现各个组件间的通信 优点&#xff1a;首先它足够小&…

从业务角度来看,DevOps 是什么?

如果您在我们的应用程序名称中看到“DevOps”&#xff0c;这意味着我们必须正确解释该术语&#xff0c;我们会这样做&#xff0c;但角度会有所不同。让我们从业务角度看看 DevOps 是什么。 通用名称 首先你应该知道&#xff0c;DevOps 没有明确的定义。是的。 大多数情况下&a…

分类和品牌关联

文章目录 1.数据库表设计1.多表关联设计2.创建表 2.使用renren-generator生成CRUD1.基本配置检查1.generator.properties2.application.yml 2.生成代码1.进入localhost:81生成代码2.将main目录覆盖sunliving-commodity模块的main目录 3.代码检查1.注释掉CategoryBrandRelationC…

使用xsd验证xml格式的正确性

1.1 基础知识介绍 XML简介&#xff1a;XML是可扩展标记语言&#xff08;eXtensible Markup Language&#xff09;的缩写&#xff0c;它是一种数据表示格式&#xff0c;可以描述非常复杂的数据结构&#xff0c;常用于传输和存储数据。xml文件、xml消息。XSD简介&#xff1a;是X…

JS对象超细

目录 一、对象是什么 1.对象声明语法 2.对象有属性和方法组成 二、对象的使用 1.对象的使用 &#xff08;1&#xff09;查 &#xff08;2&#xff09;改 &#xff08;3&#xff09;增 &#xff08;4&#xff09;删&#xff08;了解&#xff09; &#xff08;5&#xf…

九州未来十二周年丨聚力同行,奔赴智能新未来

九州未来迎来十二周年&#xff01; 从国内首批提供 OpenStack 云服务的专业公司&#xff0c; 经过十二年的发展&#xff0c; 现今成长为开放智能云边架构引领者。 在这十二年的时间中&#xff0c; 九州未来持续创新&#xff0c;步履不停&#xff0c; 打造成熟的云基础设施…

【软件测试】软件测试基础理论

目录 软件测试简介软件产生过程小结 主流测试掌握技能功能测试功能测试的注意事项 自动化测试自动化测试的优势自动化测试的限制和适用性&#xff1a;自动化测试的注意事项 接口测试接口测试通常可以涵盖以下方面接口测试的注意事项 性能测试性能测试的几个方面性能测试的注意事…

JavaSE:Clonable接口、浅拷贝与深拷贝

1、引言 我们在学习的数组时&#xff0c;就了解到了数组克隆方法&#xff0c;可以通过数组克隆方法来拷贝一个一模一样的数组&#xff1a; 那对于自定义类型中有没有克隆方法呢&#xff1f;答案是有的&#xff01; 就让这篇文章来帮助大家学习自定义类型的拷贝&#xff01; …

基于深度学习的表情识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着人工智能技术的快速发展&#xff0c;表情识别成为了人机交互领域的一个研究热点。表情识别技术旨…