参考:https://segmentfault.com/q/1010000007136263

法一:text-align-last:justify;

html

<div>
<p class="item">
<label for="name" class="itemLabel">姓名</label>
<input type="text" class="itemContent" id="name"> </p>
<p class="item">
<label for="phone" class="itemLabel">手机号</label>
<input type="text" class="itemContent" id="phone">
</p> </div>

css

 .itemLabel{
display: inline-block;
width: 60px;
text-align-last:justify;
}

由于text-align-last的兼容性问题:https://caniuse.com/#search=text-align-last,需要使用法二实现:

css

        .item{
position: relative;
}
.itemContent{
position: absolute;
left:70px;
}
.itemLabel{
display: inline-block;
width: 60px;
text-align: justify;
}
.itemLabel:after{
display: inline-block ;
content: '';
width: 100%;
}

CSS _text-align:justify;实现两端对齐的更多相关文章

  1. CSS3 justify 文本两端对齐

    浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...

  2. CSS实现文字两端对齐

    最近的项目遇到了这样的需求:(要求标题部分不管文字多少,都必须两端对齐) 如下图: 当时也没有多想直接使用‘ ’进行代替,毕竟产品同学想快一点看到效果,不敢怠慢!不过到第二个页面就傻眼了. 如图: 这 ...

  3. p标签text-align:justify以及CSS文字两端对齐

    p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...

  4. CSS:两端对齐原理(text-align:justify)

    我是一个小白我是一个小白我是一个小白喷我吧,哈哈 写样式的是时候经常会碰到字体两端对齐的效果,一般就网上找端css样式复制下就结束了,没有考虑过原理是啥贴下代码 <head> <me ...

  5. css实现左右两端对齐均匀排列 text-align: justify

    1.实现一行文字的两端对齐均匀排列 为了实现效果只是加上一个text-align: justify;是没效果的.所以需要加上一个空标签<span><i>都可以,也可以用伪类来写 ...

  6. 实现css两端对齐

    如何实现css的两端对齐功能? 最近做项目遇到这种情况,如图所示: input左边框的用户,旧密码,新密码,确认密码无法对齐,样式很丑. 解决办法: 找到对应的类名,加上:text-align:jus ...

  7. 【原】css实现两端对齐的3种方法

    说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...

  8. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  9. css实现两端对齐的3种方法

    两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...

  10. CSS两端对齐

    前面的话   两端对齐在导航条Tab的制作中非常常用.本文将详细介绍CSS两端对齐的3种实现方式 flex   弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端 ...

随机推荐

  1. chrome浏览器开发常用快捷键之基础篇-遁地龙卷风

    1.标签页和窗口快捷键 打开新的标签页,并跳转到该标签页 Ctrl + t 重新打开最后关闭的标签页,并跳转到该标签页 Ctrl + Shift + t 跳转到下一个打开的标签页 Ctrl + PgD ...

  2. CMDB项目开发

    CMDB介绍 CMDB --Configuration Management Database 配置管理数据库, CMDB存储与管理企业IT架构中设备的各种配置信息,它与所有服务支持和服务交付流程都紧 ...

  3. Android O广播接收情况

    target-261.卸载和清除收据(这两个在例外广播列表中) 可以收到广播2.应用商店升级app 收不到android.intent.action.PACKAGE_REPLACED广播,应用自身可以 ...

  4. android 应用程序记录AAR

    @note:接着读赵波的<android NFC开发实例详解>,单独列出这篇文章一是因为上一篇笔记太长了,网页编辑器不太方便编写,二是这部分的知识是android开发中的知识,以后也许会深 ...

  5. 搜索表字段包含某字符串的SQL和监控Oracle数据库的SQL。

    1.第一个SQL 背景:需要找到SQL Server数据库中,包含某个字符串的表,输出表和包含该字符串的列. )='=' --这里填要搜索的字符串 DECLARE @sql NVARCHAR(MAX) ...

  6. oracle insert into 插入多组数据方法总结

    网上好多oracle 的文章,多是以oracle开头,内容确实其他sql,一幅气死人不偿命的嘴脸着实让人难受. 今天就更新点oracle 使用insert into插入数据的方式: 1.oracle ...

  7. Qt无法正确 sendMessage 的消息

    项目背景: 项目需要将vc中的代码移植到Qt中,而且由于使用的SDK是32位,所以,Qt使用的版本是MinGW32,另外下载的也是官网最新的版本Qt5.11.1. 系统环境:Windows10 在将w ...

  8. python之yield的一些应用

    生成器 yield是用于生成器.生成器通俗的认为,在一个函数中,使用了yield来代替return的位置的函数,就是生成器.它不同于函数的使用方法是:函数使用return来进行返回值,每调用一次,返回 ...

  9. CAS5.3.0安装部署

    部署环境:JDK1.8.x maven-3.5.2 tomcat-8.x.x 1.下载地址 https://github.com/apereo/cas-overlay-template/tree/5. ...

  10. php Excel 导入功能

    下载excel类地址 https://pan.baidu.com/s/19MqAHUn4RyZ5HEAChyC0jg  密码:mn58 本人用的thinkcmf框架 把类文件放在框架的类文件里面,下面 ...