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住大部分的布局效果,当然也包括两端 ...
随机推荐
- Python+Selenium+Unittest+HTMLTestRunner生成测试报告+发送至邮箱,记一次完整的cnblog登录测试示例,
测试思路:单个测试集.单个测试汇成多个测试集.运行测试集.生成测试报告.发送至邮箱. 第一步:建立单个测试集,以cnblog登录为例. 测试用例: cnblog的登录测试,简单分下面几种情况:(1)用 ...
- Learning Feature Pyramids for Human Pose Estimation(理解)
0 - 背景 人体姿态识别是计算机视觉的基础的具有挑战性的任务,其中对于身体部位的尺度变化性是存在的一个显著挑战.虽然金字塔方法广泛应用于解决此类问题,但该方法还是没有很好的被探索,我们设计了一个Py ...
- C# 用Serializer.ToXml()方法转换成两种格式的XML
常见XML格式两种: 这种是属性的格式,实体的Model属性上面加上这个特性 [XmlAttribute] <AAA aa="/> 这种是标签的格式,实体的Model属性上面加上 ...
- CF1153C Serval and Parenthesis Sequence
题目地址:CF1153C Serval and Parenthesis Sequence 思路:贪心 如果有解,那么 \(s_0 = (\) && \(s_{n-1} = )\) &a ...
- java 新手必看大全
背景:c#开发人员 学习java 新手一枚.只适合新手 1:配置java环境 (win10环境参考本目录java环境配置) 2:IDEA 熟悉开发工具 (当初没学java 很大的一个原因就是工具e文 ...
- jmeter知识总结(一)
Apache JMeter是一款纯java编写负载功能测试和性能测试开源工具软件.相比Loadrunner而言,JMeter小巧轻便且免费,逐渐成为了主流的性能测试工具,是每个测试人员都必须要掌握的工 ...
- python基础--absl.flags
之前在tensorflow的mnist例程中看到了使用 absl.flags的方法来载入和解析参数的,出于学习的目的,就自己试验了一下, 代码如下: # *_*coding:utf-8 *_* # a ...
- SQL baseline_11g
conn sh/sh--执行想要创建基线的语句,语句的执行计划将会被缓存set autotrace on select /*ghbaselines1*/ count(*) from customers ...
- python vs C++ 类
1. 什么是动态语言(wikipedia) 在运行时,可以进行一些操作(静态语言在编译时执行),比如扩展对象的定义.修改类型等 2. 定义类和创建对象 C++ python class A{ publ ...
- 关于Java中构造方法的问题以及回答
构造方法 概念: 又叫 构造器,区分于传统的方法,是一个在创建对象时被系统自动调用的特殊方法 作用: 一:为对象进行初始化(成员变量)的工作 二:为对象在堆内存中开辟独立的内存空间 定义格式: 访问修 ...