CSS实现文本两端对齐
2018-06-21 本文已影响0人
Homary
CSS实现文本两端对齐
我们在制作表单时经常遇到控件前的label标签中文本长度不一,有时候为了美观,我们会采取文本两端对齐的方式
效果图
image.png
以前我们都使用过通过在文字间添加&nspb;的方法,但是这种方法太过于繁琐.
这就用到了我们的 text-align 属性中的 justify
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<p class="nowarp">姓名</p>
<p class="nowarp">所在地</p>
<p class="nowarp">报名地点</p>
<p class="nowarp">邮箱</p>
</body>
</html>
.nowarp{
text-align: justify;
background-color: red;
width: 300px;
overflow: hidden;
}
.nowarp:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
如果是使用
span标签,则需要定义display为inline-block或者block
只在Chrome以及Firefox浏览器下测试
实现效果
