在进行网页设计时,我们经常会看到这样的样式:文本两端对齐。

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之文本两端对齐的更多相关文章

  1. css之文本两端对齐的两种解决方法

    说起文本对齐,大家都知道text-align,最常用的有left.right.center,今天我们说一下justify,也就是文本两端 对齐.说起来简单,但是有些小坑大家还是要注意的. 现在我们有这 ...

  2. css:段落文本两端对齐

    效果图: Css:

  3. css实现文本两端对齐

    display:inline-block; text-align:center; text-align-last:justify;

  4. css文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...

  5. CSS3 justify 文本两端对齐

    浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...

  6. CSS3单行文本两端对齐

    CSS3实现单行文本两端对齐 p { height: 24px; text-align: justify; text-last-align: justify; } p::after { display ...

  7. css 文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...

  8. css text-align文字两端对齐

    text-align:start | end | left | right | center | justify | match-parent | justify-all justify: 内容两端对 ...

  9. CSS中英文字符两端对齐实现

    两端对齐实现 一般加上下面2行就可实现 display: inline-block; text-align: justify; 但是对于中英文混杂的情况,中英文难一起实现对齐,原因在下面有分析,需要如 ...

随机推荐

  1. PS中如何把图片颜色加到字体上去

    1.在PS中的图层中,将图片置于文字层的上方,同时按ctrl+alt+g键,这样就将文字范围以外的图像给剪切掉了.见附图下方的效果. 2.最终效果如下图: 参见:https://zhidao.baid ...

  2. countByValue

    [1,2,3,3]的RDD rdd.foreach(println)---------------------1 2 3 3

  3. Django--CRM--菜单展示, 删除合并, 权限展示

    一 . 菜单展示 二 . 合并删除 我们可以把所有的删除都合并成一个函数这样就会减少很多的代码. 思路: 在url里面需要传两个参数,一个是要删的id 一个是名字 三 .权限展示 我们要实现两个功能 ...

  4. 在Hmtl页面中只让其中单独的一个div隐藏滚动条但是仍可滚动浏览下边的内容

    <style> .box ::-webkit-scrollbar {width: 0px;} </style> <div class="box"> ...

  5. github---无命令可视化界面操作

    最近工作需要,研究了一下git,这个东西挺实用,给我的感觉并不是那么简单使用,我认为还可以再深入的研究一下,挺好玩的~ 说一下我的学习路线: 1.先看的廖老师的博客:https://www.liaox ...

  6. Lodop文本项相对于文本框居中 两端对齐

    Lodop中ADD_PRINT_TEXT默认内容是相对于文本框居左的,如果想要设置相对于文本框居中,可用如下语句.还有一种是两端对齐,可以让内容的两端阿和文本框的最左和最右端对齐,文本项内容布满文本框 ...

  7. The Bug and Exception of Hibernate

    1: hibernate4.3.5 的@oneToOne注解有Bug,建议不使用该版本,或者使用该版本不使用@table   annotation. 2:今天在用hibernate4.2.13的时候, ...

  8. windows下ping端口

    上图的操作完成以后  进入dos控制台 输入telnet  ip地址  端口号   回车 标识已ping通 ping不通是这种提示

  9. Nginx 多核cpu负载均衡

    L:122 查看Linux CPU 缓存大小 cat /sys/devices/system/cpu/cpu1/cache/index0/size //指令缓存 cat /sys/devices/sy ...

  10. 本科理工男如何学习Linux

    我是一个本科学电子的理工男,但是一直对计算机感兴趣,所以平时自己在课下喜欢学一些与计算机有关的东西.由于对计算机感兴趣,所以后来我参加了学校的计算机社团,在那里接受一些培训和指导.当时在社团里看到师兄 ...