某天，你想新建一個表單策幼，這時你發(fā)現(xiàn)了一個問題：
image.png
咦邑时，什么鬼，這個東西怎么和我預(yù)期的不太一樣特姐，本想 姓名 聯(lián)系方式 年齡 家庭住址 都是兩端對齊晶丘；這可怎么辦，想了一下唐含，誒浅浮，我在中間加入空格
image.png
很好！很完美淮捆！就這樣搞定郁油，某一天，你突然發(fā)現(xiàn)一個bug攀痊，怎么將font-family換一種字體后桐腌，怎么就失效了；現(xiàn)在你的情況是這樣的：
image.png
what? 這可怎么辦蚕苇；難道
恩凿叠，你想的沒錯涩笤，字體在創(chuàng)建的時候，開發(fā)者就已經(jīng)規(guī)定好相關(guān)的參數(shù)了盒件，看來得換一種方法解決這個問題蹬碧；
這時候你想到
text-align="justify"這個屬性，當(dāng)元素多行時炒刁，會對文字進(jìn)行內(nèi)容適應(yīng)恩沽；但是我們這就只有一行文字，那我們就使用偽元素創(chuàng)建一個翔始；
span::after{
content: '',
display:inline-block,
width:100%;
讓'姓名' 和寬度100%的空元素進(jìn)行適應(yīng)顯示;看下效果：
image.png
在
font-family: monospace 情況下罗心，同樣完美的適應(yīng)了兩邊對齊；下面我們進(jìn)行進(jìn)一步的優(yōu)化城瞎；將元素添加邊框渤闷，使用border大法！
去除偽元素占據(jù)的空間：
image.png
獻(xiàn)上完整代碼：
<style>
div {
border: 1px solid blue;
font-size: 20px;
}
span {
border: 1px solid red;
display: inline-block;
text-align: justify;
width: 5em;
height: 20px;
line-height: 20px;
overflow: hidden;
}
span::after {
content: '';
display: inline-block;
width: 100%;
}
</style>
</head>
<body>
<div>
<span>姓名</span>
<br>
<span>聯(lián)系方式</span>
<br>
<span>年齡</span>
<br>
<span>家庭住址</span>
</div>
<!-- -->
</body>
大家可以自己測試使用脖镀；本篇完結(jié)飒箭！
