文字兩端對齊
阿新 • • 發佈：2021-02-04
技術標籤：CSS
就很不美觀
兩端對齊
html
<body>
<div class="box1"><span class="name">姓名</span>:</div>
<div class="box2"><span class="id">身份證號</span>:</div>
</body>
- text-align
.name{ width: 63px; display: inline-block; text-align: justify; text-align-last: justify; }
效果
2.偽元素
.name{
width: 63px;
height：30px; // 縮小span高度
display: inline-block;
text-align: justify;
vertical-align: top;
}
.name::after{
display: inline-block;
content: '';
width: 100%;
}
效果
ps：
可以看出偽元素的使用增大了span的高度，這時候可以使用height來縮小這個高度。