CSS _text-align:justify;实现两端对齐
参考: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;实现两端对齐的更多相关文章
- CSS3 justify 文本两端对齐
浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...
- CSS实现文字两端对齐
最近的项目遇到了这样的需求:(要求标题部分不管文字多少,都必须两端对齐) 如下图: 当时也没有多想直接使用‘ ’进行代替,毕竟产品同学想快一点看到效果,不敢怠慢!不过到第二个页面就傻眼了. 如图: 这 ...
- p标签text-align:justify以及CSS文字两端对齐
p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...
- CSS:两端对齐原理(text-align:justify)
我是一个小白我是一个小白我是一个小白喷我吧,哈哈 写样式的是时候经常会碰到字体两端对齐的效果,一般就网上找端css样式复制下就结束了,没有考虑过原理是啥贴下代码 <head> <me ...
- css实现左右两端对齐均匀排列 text-align: justify
1.实现一行文字的两端对齐均匀排列 为了实现效果只是加上一个text-align: justify;是没效果的.所以需要加上一个空标签<span><i>都可以,也可以用伪类来写 ...
- 实现css两端对齐
如何实现css的两端对齐功能? 最近做项目遇到这种情况,如图所示: input左边框的用户,旧密码,新密码,确认密码无法对齐,样式很丑. 解决办法: 找到对应的类名,加上:text-align:jus ...
- 【原】css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
- css文字两端对齐
css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...
- css实现两端对齐的3种方法
两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...
- CSS两端对齐
前面的话 两端对齐在导航条Tab的制作中非常常用.本文将详细介绍CSS两端对齐的3种实现方式 flex 弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端 ...
随机推荐
- select中option的onclick事件失效
html: <select id="pageSelect"> <option value="1" selected onclick=" ...
- 内核模块加载错误 “Invalid module format” 解决办法
参考链接: http://blog.chinaunix.net/uid-20448327-id-172345.html
- C# - 设计模式 - 钩子模式
钩子模式 问题场景 如何控制抽象类的行为?解决办法是靠钩子!抽象类公布一个虚方法,由子类自行决定是否重写它,抽象类以钩子做判定,如果返回真则执行某个方法,否则不执行.为什么钩子不能是抽象的,因为如果钩 ...
- 用户态与内核态 & 文件流与文件描述符 简介【转】
转自:https://www.cnblogs.com/Jimmy1988/p/7479856.html 用户态和内核态 程序代码的依赖和调用关系如下图所示: Lib:标准ASCI C函数,几乎所有的平 ...
- iOS(12) ANCS链接问题(用Android 9.0设备链接)
由于iOS系统默认不会为自带的ANCS服务发送广播, 并且使用ANCS的通知订阅功能必须进行配对. 所以我们需要在ios上写自己的代码,让目标设备和iOS进行配对. 配对完成后,监听设备和iOS都可以 ...
- 24 类:组合 继承 super关键字 面向对象的三大性
组合 组合:自定义类的对象作为另外一个类的属性 class Teacher: def __init__(self, name, age): self.name = name self.age = ag ...
- JS 冷知识,运行机制
数组取最小.最大值 var a=[1,2,3,5]; alert(Math.max.apply(null, a));//最大值 alert(Math.min.apply(null, a));//最小值 ...
- Java - day001 - 8种基本数据类型
一字节8电位 Java byte 最左边一位表示正负,0是正,1是负. (option / alt) + / 代码提示 Refactor 重构 Rename 重命名 (windows 重命名是选中 ...
- .NET Core on K8S快速入门课程学习笔记
课程链接:http://video.jessetalk.cn/course/explore 良心课程,大家一起来学习哈! 目录 01-介绍K8s是什么 02-为什么要学习k8s 03-如何学习k8s ...
- mysql 和 sqlserver sql差异比较
mysql:select * from table_name limit 100,200;--取出从100到200的数据 获取时间:mysql:now() mysql tinyint(0,1) → b ...