做前端的難免被設(shè)計(jì)折磨，如圖要實(shí)現(xiàn)文字長(zhǎng)度不一樣，又得文字對(duì)齊
文字兩端對(duì)齊
怎么實(shí)現(xiàn)？
- 1）第一個(gè)想到的是，加空格吧，& n b s p; （
請(qǐng)?jiān)徫遥@個(gè)字符打?qū)惋@示不出來了）；經(jīng)實(shí)測(cè)，換了字體就徹底完蛋，況且加空格好煩好嗎？?。?！ - 2）貌似css文本對(duì)齊有個(gè)
text-align: justify;；官方告訴我設(shè)置這個(gè)就可以實(shí)現(xiàn)兩端對(duì)齊，然而....事實(shí)上毛用沒有啊！你一定是在逗我??！
完了，我開始懷疑實(shí)現(xiàn)不了，跟設(shè)計(jì)商量要不咱們都右對(duì)齊吧？設(shè)計(jì)的回答是 “NO！”
于是經(jīng)過我不斷的問度娘，終于是找到個(gè)辦法，代碼如下：（Ps:相信前端er一看就懂，我就直接粘代碼了）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本兩端對(duì)齊</title>
</head>
<body>
<form action="index.html" method="post">
<h2>個(gè)人信息</h2>
<p><label>姓名</label>：<input type='text' /></p>
<p><label>身份證號(hào)</label>：<input type='text' /></p>
<p><label>持卡人</label>：<input type='text' /></p>
<p><label>手機(jī)號(hào)</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 !
