css 文字两端对齐

1、需求是这样的：用div+css实现一个表单，要求表单中，输入框前面的label文字都两端对齐,效果如下:

2、先贴出html代码：

<div class="item-box"><span>姓名：</span><el-input v-model="name"></el-input>
</div>
<div class="item-box"><span>电话号码：</span><el-input v-model="phone"></el-input>
</div>
<div class="item-box"><span>家庭详细住址：</span><el-input v-model="addr"></el-input>
</div>

3、实现文字两端对齐方式1：设置 text-align 和 text-align-last 为 justify，并且加上兼容 ie 的 text-justify 为 distribute-all-lines

.item-box{display: flex;align-items: center;margin-bottom: 10px;.el-input{width: 220px;}/*文字两端对齐方式1*/span{display: inline-block;width: 130px;text-align: justify;text-justify:distribute-all-lines; // 这行必加，兼容ie浏览器text-align-last: justify;}
}

4、实现文字两端对齐方式2：设置 text-align，并且设置伪元素 after或者 before的样式

.item-box{display: flex;align-items: baseline;margin-bottom: 10px;.el-input{width: 220px;}/*文字两端对齐方式2*/span{display: inline-block;width: 130px;text-align: justify;&:after{  // 这里 伪元素after 或者 伪元素before 都行content: '';display: inline-block;width: 100%;}}
}

5、需要注意的坑
这个文字两端对齐的只针对文字，如果你要是写上连续的字母或者数字，那用上面的 ‘实现文字两端对齐方式1’ 或者 ‘实现文字两端对齐方式2’ 是怎么都实现不了文字两端对齐的效果的，呈现效果就是下面这张图

<div class="item-box"><span>111：</span><el-input v-model="name"></el-input>
</div>
<div class="item-box"><span>3333：</span><el-input v-model="phone"></el-input>
</div>
<div class="item-box"><span>aafasdfa：</span><el-input v-model="addr"></el-input>
</div>

如果想实现，那就连续数字或者连续字母之间加空格，例如：

<div class="item-box"><span>1 1 1：</span><el-input v-model="name"></el-input>
</div>
<div class="item-box"><span>3 3 3 3：</span><el-input v-model="phone"></el-input>
</div>
<div class="item-box"><span>a a f a s d f a：</span><el-input v-model="addr"></el-input>
</div>

整理记录就到这里，祝大家开心

css 文字两端对齐相关推荐

css两端对齐不起作用?真正可用的CSS文字两端对齐
最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,差不多都是互相转帖,用的都是类似的技巧: text-align:justify; text-justify:in ...
真正可用的CSS文字两端对齐
最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,差不多都是互相转帖,用的都是类似的技巧: text-align:justify;text-justify:int ...
html图片左右对齐,css如何让图片或者文字两端对齐
css原生的就支持图片或者文字两端对齐.两端对齐,在css布局中是很常见的.两端对齐,是子元素水平的,均匀的分布在父元素内 .css中使用两端对齐,使用的是 text-align-last:justi ...
div+css如何让一行内的文字两端对齐？
css如何让一行内的文字两端对齐? text-align:justify;. text-justify语法:text-justify : auto |inter-word | newspaper | ...
CSS实现多行文字两端对齐的效果
CSS实现多行文字两端对齐的效果文章来源:本站原创浏览次数:248 发布日期:2013-09-13 在做前台界面的时候,比如一些文字的列表或者一些表单的标题,经常是2个字,3个字,4个字的类型 ...
css如何实现文字两端对齐,CSS如何实现文字两端对齐效果？
想要实现文字两端对齐效果,可以使用CSS的text-align属性.设置text-align: justify;即可实现文字两端对齐效果. 两端对齐在导航nav的制作中非常常用,那么如何实现两端对齐效 ...
html中表格中字体两端对齐,CSS真正实现文字两端对齐布局
css实现文字两端对齐一直以来都是一个令人头痛的事情,我也是经常遇到这样的难题,这次抽点时间整理记录一下. 这里真正实现了文字两端对齐功能,下面是代码,其中上面一种使用的是表格布局,下面的是使用的DI ...
CSS中实现文字两端对齐的方法，登陆注册界面经常用到
在写登陆或注册界面时,经常会遇到文字两端对齐(word中有类似对齐方式)的问题,如下图: 用户名和密码并没有两端对齐,那么该怎样处理其实只需要两行CSS代码就可以解决: 关键两行是:text-ali ...
html语言两端对齐咋写,CSS如何实现文字两端对齐效果？
两端对齐在导航nav的制作中非常常用,那么如何实现两端对齐效果?下面本篇文章就来给大家介绍一下使用CSS实现文字两端对齐效果的方法,希望对大家有所帮助. 想要实现文字两端对齐效果,可以使用CSS的te ...

css 文字两端对齐

css 文字两端对齐相关推荐

最新文章

热门文章