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

css为我们提供了一个属性可以实现这样的效果:text-align: justify。不过这个只能用来设置多行文本(除最后一行)。如果只有单行的话,是不起效果的。那怎么办呢?这里有两种解决方案:

第一种

借助伪元素或者内联元素使文本不是最后一行。具体代码:

  1. <form>
  2. <p>
  3. <label>用户名</label>:
  4. <input type="text">
  5. </p>
  6. <p>
  7. <label>密码</label>:
  8. <input type="password">
  9. </p>
  10. </form>

scss代码:

  1. form {
  2. p {
  3. height: 20px;
  4. line-height: 20px;
  5. label {
  6. display: inline-block;
  7. width: 60px;
  8. text-align: justify;
  9. vertical-align: top;
  10. &:after {
  11. display: inline-block; /*vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。*/
  12. width: 100%;
  13. content: '';
  14. }
  15. }
  16. }
  17. }

第二种

text-align-last: justify;

scss代码:

  1. form {
  2. p {
  3. height: 20px;
  4. line-height: 20px;
  5. label {
  6. display: inline-block;
  7. width: 60px;
  8. text-align: justify;
  9. text-align-last: justify;
  10. }
  11. }
  12. }

第二种方法并不是所有浏览器都兼容,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. centos7之vm11添加网卡

    需求 根据实际需求原来有一块网卡,现在需要新加一块网卡做集群. 1.在虚拟机添加一块网卡,开机后ip a查看是不是新加了一块网卡,下图是为了讲解,其实已经是做完的状态. 2.上满我们看到新加了一块网卡 ...

  2. linux ps命令用法

    -A    列出所有的进程-w    显示加宽可以显示较多的资讯-au    显示较详细的资讯-aux    显示所有包含其他使用者的行程 -A 显示所有进程(等价于-e)(utility)-a 显示 ...

  3. sonar安装

    ##jdk不要用yum下载的 一.下载sonar源码 cd /usr/local/src wget https://sonarsource.bintray.com/Distribution/sonar ...

  4. MyBatis基础:MyBatis数据基本操作(2)

    1. MyBatis映射器 2. MyBatis数据基本操作 示例项目结构: <project xmlns="http://maven.apache.org/POM/4.0.0&quo ...

  5. Mybatis之执行自定义SQL举例

    本文说明如何使用Mybatis执行我自定义输入的SQL语句. 需要的mybaits文件包括:配置文件(mybatis-config-dao.xml 和 jdbc.properties).接口文件(IS ...

  6. Java反射和注解

    反射:http://blog.csdn.net/liujiahan629629/article/details/18013523 注解:http://www.cnblogs.com/peida/arc ...

  7. 当进行数据查询时候 要考虑创建一个model ;具备传入与输出的字段

    当进行数据查询时候 要考虑创建一个model ;具备传入与输出的字段

  8. Django-urls路由系统

    Django的路由系统 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. ...

  9. P1319 压缩技术

    很多小伙伴卡在此题的原因可能是因为不知道怎么让它输入无限个数字吧?除了用string,在这里我是看到“压缩码保证 N * N=交替的各位数之和”这一句话,想到用while循环.只要输入的数的总和t小于 ...

  10. Codeforces997C Sky Full of Stars 【FMT】【组合数】

    题目大意: 一个$n*n$的格子,每个格子由你填色,有三种允许填色的方法,问有一行或者一列相同的方案数. 题目分析: 标题的FMT是我吓人用的. 一行或一列的问题不好解决,转成它的反面,没有一行和一列 ...