某天，你想新建一个表单，这时你发现了一个问题：
image.png
咦，什么鬼，这个东西怎么和我预期的不太一样，本想 姓名 联系方式 年龄 家庭住址 都是两端对齐；这可怎么办，想了一下，诶，我在中间加入空格
image.png
很好！很完美！就这样搞定，某一天，你突然发现一个bug，怎么将font-family换一种字体后，怎么就失效了；现在你的情况是这样的：
image.png
what? 这可怎么办；难道
恩，你想的没错，字体在创建的时候，开发者就已经规定好相关的参数了，看来得换一种方法解决这个问题；
这时候你想到
text-align="justify"这个属性，当元素多行时，会对文字进行内容适应；但是我们这就只有一行文字，那我们就使用伪元素创建一个；
span::after{
content: '',
display:inline-block,
width:100%;
让'姓名' 和宽度100%的空元素进行适应显示;看下效果：
image.png
在
font-family: monospace 情况下，同样完美的适应了两边对齐；下面我们进行进一步的优化；将元素添加边框，使用border大法！
去除伪元素占据的空间：
image.png
献上完整代码：
<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>联系方式</span>
<br>
<span>年龄</span>
<br>
<span>家庭住址</span>
</div>
<!-- -->
</body>
大家可以自己测试使用；本篇完结！
网友评论