不用空格实现文字两端对齐
2017-02-07 本文已影响353人
小枫学幽默
做前端的难免被设计折磨，如图要实现文字长度不一样，又得文字对齐
文字两端对齐
怎么实现？
- 1）第一个想到的是，加空格吧，& n b s p; （
请原谅我，这个字符打对就显示不出来了）；经实测，换了字体就彻底完蛋，况且加空格好烦好吗？！！！ - 2）貌似css文本对齐有个
text-align: justify;；官方告诉我设置这个就可以实现两端对齐，然而....事实上毛用没有啊！你一定是在逗我！！
完了，我开始怀疑实现不了，跟设计商量要不咱们都右对齐吧？设计的回答是 “NO！”
于是经过我不断的问度娘，终于是找到个办法，代码如下：（Ps:相信前端er一看就懂，我就直接粘代码了）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本两端对齐</title>
</head>
<body>
<form action="index.html" method="post">
<h2>个人信息</h2>
<p><label>姓名</label>：<input type='text' /></p>
<p><label>身份证号</label>：<input type='text' /></p>
<p><label>持卡人</label>：<input type='text' /></p>
<p><label>手机号</label>：<input type='text' /></p>
<p><label>省-市-区</label>：<input type='text' /></p>
<p><label>详细地址</label>：<input type='text' /></p>
</form>
</body>
</html>
CSS
body{
background-color: #f8f8f8;
}
a:link,a:visited{
color: #333;
text-decoration: none;
}
*{
padding: 0px;
margin: 0px;
list-style-type: none;
}
form{
width: 375px;
height: 667px;
margin: 30px auto;
background-color: #ffffff;
}
form h2{
color: #fff;
text-align: center;
background-color: #05b3e9;
border-bottom: 1px solid #ededed;
height: 45px;
line-height: 45px;
font-size:20px;
font-style: normal;
font-weight: normal;
font-family: Arial, 'Microsoft YaHei', Helvetica, 'Hiragino Sans GB';
}
p{
line-height: 45px;
padding: 0px 10px;
border-bottom: 1px solid #ededed;
}
p input{
padding: 5px 10px;
border: 1px solid #ededed;
}
p input:focus{
outline: none
}
p label{
width: 100px;
text-align: justify;
height: 45px;
display: inline-block;
vertical-align:top;
}
p label::after{
content:"";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
OK ! 分享Over !
