参考: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. Linux中查看端口占用情况

    1.lsof -i:端口号 用于查看某一端口的占用情况,比如查看8000端口的使用情况: # lsof -i:8000 2.netstat -tunlp | grep 端口号,用于查看指定的端口号的进 ...

  2. PHP 【六】

    命名空间 教学网站的内容不知道再怎么“笔记化”,用之即可 面向对象 类定义 创建对象  $xxx = new 类名: 调用成员方法  $xxx->方法名(参数): 举例: <?php cl ...

  3. 机器学习基石7-The VC Dimension

    注: 文章中所有的图片均来自台湾大学林轩田<机器学习基石>课程. 笔记原作者:红色石头 微信公众号:AI有道 前几节课着重介绍了机器能够学习的条件并做了详细的推导和解释.机器能够学习必须满 ...

  4. mysql登录报错“Access denied for user 'root'@'localhost' (using password: YES”)的处理方法

    环境 CentosOS 6.5 ,已安装mysql 情景 root密码忘记,使用普通用户无法登录 解决 问题一 无法使用mysql命令 参考文章:https://www.cnblogs.com/com ...

  5. 【python系列】--Python变量和数据类型

    python数据类型 一.整数 Python可以处理任意大小的整数,当然包括负整数,在Python程序中,整数的表示方法和数学上的写法一模一样,例如:1,100,-8080,0,等等. 计算机由于使用 ...

  6. 清晰讲解SQL语句中的内连接,通用于Mysql和Oracle,全是干货哦

    本文章目的:力求清晰明了讲解SQL语句的内连接的各种应用,没有深奥的理解! 前奏:这篇文章和下篇文章会将内连接和外连接讲解清楚SQL语句的多表查询常用的有以下几种:两表联合查询(1)内连接(2)外连接 ...

  7. 搭建jenkins实现自动化部署

    搭建jenkins实现自动化部署 一.安装jenkins 1.添加yum repos,然后安装 sudo wget -O /etc/yum.repos.d/jenkins.repo https://p ...

  8. TypeError: can only concatenate str (not "int") to str解决方式

    使用format函数解决问题 for page in range(1,pagebox+1): url = "https://www.dd373.com/s/rbg22w-x9kjbs-wwf ...

  9. 2018-2019-2 20165323《网络攻防技术》Exp5 MSF基础应用

    一.知识点总结 1.MSF攻击方法 主动攻击:扫描主机漏洞,进行攻击 攻击浏览器 攻击其他客户端 2.MSF的六种模块 渗透攻击模块Exploit Modules:攻击漏洞,把shellcode&qu ...

  10. C# 获取版本号

    Text = Text + " [V." + Assembly.GetExecutingAssembly().GetName().Version + "]";