css之文本两端对齐
在进行网页设计时,我们经常会看到这样的样式:文本两端对齐。
css为我们提供了一个属性可以实现这样的效果:text-align: justify。不过这个只能用来设置多行文本(除最后一行)。如果只有单行的话,是不起效果的。那怎么办呢?这里有两种解决方案:
第一种
借助伪元素或者内联元素使文本不是最后一行。具体代码:
<form>
<p>
<label>用户名</label>:
<input type="text">
</p>
<p>
<label>密码</label>:
<input type="password">
</p>
</form>
scss代码:
form {
p {
height: 20px;
line-height: 20px;
label {
display: inline-block;
width: 60px;
text-align: justify;
vertical-align: top;
&:after {
display: inline-block; /*vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。*/
width: 100%;
content: '';
}
}
}
}
第二种
text-align-last: justify;
scss代码:
form {
p {
height: 20px;
line-height: 20px;
label {
display: inline-block;
width: 60px;
text-align: justify;
text-align-last: justify;
}
}
}
第二种方法并不是所有浏览器都兼容,https://caniuse.com/#search=text-align-last
css之文本两端对齐的更多相关文章
- css之文本两端对齐的两种解决方法
说起文本对齐,大家都知道text-align,最常用的有left.right.center,今天我们说一下justify,也就是文本两端 对齐.说起来简单,但是有些小坑大家还是要注意的. 现在我们有这 ...
- css:段落文本两端对齐
效果图: Css:
- css实现文本两端对齐
display:inline-block; text-align:center; text-align-last:justify;
- css文本两端对齐
在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...
- CSS3 justify 文本两端对齐
浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...
- CSS3单行文本两端对齐
CSS3实现单行文本两端对齐 p { height: 24px; text-align: justify; text-last-align: justify; } p::after { display ...
- css 文本两端对齐
在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...
- css text-align文字两端对齐
text-align:start | end | left | right | center | justify | match-parent | justify-all justify: 内容两端对 ...
- CSS中英文字符两端对齐实现
两端对齐实现 一般加上下面2行就可实现 display: inline-block; text-align: justify; 但是对于中英文混杂的情况,中英文难一起实现对齐,原因在下面有分析,需要如 ...
随机推荐
- PS中如何把图片颜色加到字体上去
1.在PS中的图层中,将图片置于文字层的上方,同时按ctrl+alt+g键,这样就将文字范围以外的图像给剪切掉了.见附图下方的效果. 2.最终效果如下图: 参见:https://zhidao.baid ...
- countByValue
[1,2,3,3]的RDD rdd.foreach(println)---------------------1 2 3 3
- Django--CRM--菜单展示, 删除合并, 权限展示
一 . 菜单展示 二 . 合并删除 我们可以把所有的删除都合并成一个函数这样就会减少很多的代码. 思路: 在url里面需要传两个参数,一个是要删的id 一个是名字 三 .权限展示 我们要实现两个功能 ...
- 在Hmtl页面中只让其中单独的一个div隐藏滚动条但是仍可滚动浏览下边的内容
<style> .box ::-webkit-scrollbar {width: 0px;} </style> <div class="box"> ...
- github---无命令可视化界面操作
最近工作需要,研究了一下git,这个东西挺实用,给我的感觉并不是那么简单使用,我认为还可以再深入的研究一下,挺好玩的~ 说一下我的学习路线: 1.先看的廖老师的博客:https://www.liaox ...
- Lodop文本项相对于文本框居中 两端对齐
Lodop中ADD_PRINT_TEXT默认内容是相对于文本框居左的,如果想要设置相对于文本框居中,可用如下语句.还有一种是两端对齐,可以让内容的两端阿和文本框的最左和最右端对齐,文本项内容布满文本框 ...
- The Bug and Exception of Hibernate
1: hibernate4.3.5 的@oneToOne注解有Bug,建议不使用该版本,或者使用该版本不使用@table annotation. 2:今天在用hibernate4.2.13的时候, ...
- windows下ping端口
上图的操作完成以后 进入dos控制台 输入telnet ip地址 端口号 回车 标识已ping通 ping不通是这种提示
- Nginx 多核cpu负载均衡
L:122 查看Linux CPU 缓存大小 cat /sys/devices/system/cpu/cpu1/cache/index0/size //指令缓存 cat /sys/devices/sy ...
- 本科理工男如何学习Linux
我是一个本科学电子的理工男,但是一直对计算机感兴趣,所以平时自己在课下喜欢学一些与计算机有关的东西.由于对计算机感兴趣,所以后来我参加了学校的计算机社团,在那里接受一些培训和指导.当时在社团里看到师兄 ...