摘要：需求如下，红框所在的文字有四个字的三个字的两个字的，如果不两端对齐可以选择居中对齐，或者右对齐。其实现的效果就是可以让一行文字两端对齐显示文字内容要超过一行。
需求如下，红框所在的文字有四个字的、三个字的、两个字的，如果不两端对齐可以选择居中对齐，或者右对齐。但是如果要像下面这样两端对齐呢？
我相信以前很多人都这么干过：两个字中间使用 来隔开达到四个字的宽度，三个字也可以，但是，像上图中“122账号”“122密码”这样的，就不好计算该用几个空格了。
假如我们有如下HTML：
</>复制代码
给它加点样式
</>复制代码
div{ width:500px; border:1px solid red; text-align: justify;}
初始效果是这样的
text-align: justify这是什么东西？CSS2中text-align有一个属性值为justify，为对齐之意。其实现的效果就是可以让一行文字两端对齐显示（文字内容要超过一行）。
但是光使用它依然没什么卵用…..
要使文字两端对齐，我们还得使用一个行内空标签来助阵，比如、等等，这里是我用标签
</>复制代码
给这个i标签设置如下样式
</>复制代码
div i{ display:inline-block; /*padding-left: 100%;*/ width:100%;}
padding-left: 100%和width:100%都可以达到效果，选用其一即可。效果如下
但是加入HTML元素又违反了结构表现分离的原则，我们可以改用after、before伪元素：
</>复制代码
div:after { content: " "; display: inline-block; width: 100%;}
感谢 @依韵_宵音 的提醒
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116611.html
摘要：中当属性被赋值为时属性经常被用来和属性一起设置文本两端对齐的方式。 CSS中,当text-align属性被赋值为justify时,text-justify属性经常被用来和text-align属性一起设置文本两端对齐的方式。 p { text-align: justify; text-justify: inter-word; } Values inter-word: 表示当前文...
摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。 之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...
摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。 之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...
阅读 1722·2021-10-14 09:43
阅读 5918·2021-09-07 10:21
阅读 1433·2019-08-30 15:56
阅读 2241·2019-08-30 15:53
阅读 1324·2019-08-30 15:44
阅读 2110·2019-08-30 15:44
阅读 1428·2019-08-29 17:24
阅读 858·2019-08-29 15:19
