text-align 属性是规定元素中的文本的水平对齐方式, 设置块级元素内文本的水平对齐方式.
在平常的开发过程中, 对于 text-align 一般用到的是 left,center,right.justify 很少用到, 它实现两端对齐文本效果, 文本行的左右两端都放在父元素的内边界上.
效果初体验
首先有个比较简单的例子.
html 代码:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- .demo{ width: 70px; /*text-align: justify;*/ }
- </style>
- </head>
- <body>
- <div class='demo'>
- <p>
- 飞洒发 fd 达 fasdf 省 sdf 份发 f 送 fdfd 大 df 夫 df 萨
- </p>
- </div>
- </body>
- </HTML>
不使用 justify 的结果:
使用 justify, 可以看出每一段都对齐了:
在表单中的应用
当 text-align:justify 使用在单行中, 是起不到 justify 的作用的
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- span{ width: 70px; text-align: justify; } input{ width: 100px; }
- </style>
- </head>
- <body>
- <div class="demo">
- <span>
- 昵称:
- </span>
- <input type="text" style='width: 100px'>
- <br>
- <br>
- <span>
- 电子邮箱:
- </span>
- <input type="email" style='width: 100px;'>
- </div>
- </body>
- </HTML>
既然单行不行, 那么就用多行. 但是怎么用单行呢?-- 用 after
需要将 span 设置为 float: left,:after 为 inline-block
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- span{ width: 100px; text-align: justify; float: left; } span:after{ content:'.';
- width: 100%; display: inline-block; overflow: hidden; height: 0; } input{
- width: 100px; }
- </style>
- </head>
- <body>
- <div class="demo">
- <span>
- 昵称
- </span>
- :
- <input type="text" style='width: 100px'>
- <br>
- <br>
- <span>
- 电子邮箱
- </span>
- :
- <input type="email" style='width: 100px;'>
- </div>
- </body>
- </HTML>
结果为:
来源: http://www.bubuko.com/infodetail-2947701.html