做前端的難免被設(shè)計折磨晃洒，如圖要實現(xiàn)文字長度不一樣，又得文字對齊
文字兩端對齊
怎么實現(xiàn)唱歧？
- 1）第一個想到的是宪摧，加空格吧，& n b s p; （
請原諒我颅崩，這個字符打?qū)惋@示不出來了）几于；經(jīng)實測，換了字體就徹底完蛋沿后，況且加空格好煩好嗎？５迷恕Ｏヲ凇！ - 2）貌似css文本對齊有個
text-align: justify;；官方告訴我設(shè)置這個就可以實現(xiàn)兩端對齊肺素，然而....事實上毛用沒有八鳌！你一定是在逗我ｓ菸病捡需！
完了，我開始懷疑實現(xiàn)不了筹淫，跟設(shè)計商量要不咱們都右對齊吧站辉？設(shè)計的回答是 “NO！”
于是經(jīng)過我不斷的問度娘损姜，終于是找到個辦法饰剥，代碼如下：（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>省-市-區(qū)</label>：<input type='text' /></p>
<p><label>詳細(xì)地址</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 !
