参考: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. 内核模块加载错误 “Invalid module format” 解决办法

    参考链接:  http://blog.chinaunix.net/uid-20448327-id-172345.html

  2. EOCS框架概述和剖析

    什么是EOCS? EOCS(Enterprise Operation Cross System),是一个基于eosio底层框架实现的企业级跨链操作系统,旨在实现和EOS主链通信的并行链,是真正意义的跨 ...

  3. easyui datagrid使用按钮

    $('#datagrid').datagrid({ border:false, fitColumns:true, singleSelect: true, url:url, columns:[[ {fi ...

  4. Appnium-API-Session

    Session Create New Session Java: DesiredCapabilities desiredCapabilities = new DesiredCapabilities() ...

  5. python 列表中[ ]中冒号‘:’的作用

    中括号[ ]:用于定义列表或引用列表.数组.字符串及元组中元素位置 list1 = [, ] list2 = [, , , , , , ] print ] print :]   冒号: 用于定义分片. ...

  6. Android OS的image文件组成

    Android OS由以下image文件组成: 1)Bootloader ---在设备启动时开始加载Boot image 2)Boot image ---Kernel 和 RAMdisk 3)Syst ...

  7. 洛谷P4774 [NOI2018]屠龙勇士 [扩欧,中国剩余定理]

    传送门 思路 首先可以发现打每条龙的攻击值显然是可以提前算出来的,拿multiset模拟一下即可. 一般情况 可以搞出这么一些式子: \[ atk_i\times x=a_i(\text{mod}\ ...

  8. USB鼠标键盘数据格式以及按键键值

    鼠标发送给PC的数据每次4个字节 BYTE1 BYTE2 BYTE3 BYTE4 定义分别是: BYTE1 --        |--bit7:   1   表示   Y   坐标的变化量超出-256 ...

  9. 如何进行PDF页码编排,如何调整PDF页码顺序

    PDF文件的页码顺序如何进行调整?许多小伙伴们都不知道,我们在编辑的时候只知道PDF文件的编辑方法,但是调整页码的顺序我们或许不会,但是如何去进行操作呢?看小编的方法吧!如果我们想要修改PDF文件中的 ...

  10. maven安装与环境变量配置

    一.什么是maven Maven基于项目对象模型(POM Project Object Model),可以通过一小段描述信息(配置文件)来管理项目的构建.报告和文档的软件项目管理工具. 同时也是跨平台 ...