某天,你想新建一個表單策幼,這時你發(fā)現(xiàn)了一個問題:
image.png
咦邑时,什么鬼,這個東西怎么和我預(yù)期的不太一樣特姐,本想 姓名 聯(lián)系方式 年齡 家庭住址 都是兩端對齊晶丘;這可怎么辦,想了一下唐含,誒浅浮,我在中間加入空格
不就解決了,完美捷枯,開始嘗試滚秩;
image.png
很好!很完美淮捆!就這樣搞定郁油,某一天,你突然發(fā)現(xiàn)一個bug攀痊,怎么將font-family
換一種字體后桐腌,怎么就失效了;現(xiàn)在你的情況是這樣的:
image.png
what? 這可怎么辦蚕苇;難道
還能根據(jù)字體的樣式進(jìn)行變化不成;恩凿叠,你想的沒錯涩笤,字體在創(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é)飒箭!