实现一行文字两端对齐

需求中有时会遇到字数不同却需要两端对齐，如下图结构：

在字中间加空格并不能完全对齐。css中有属性text-align: justify，在文字内容超过一行时可实现对齐。如图所示，文字只有一行，实现对齐时需借助行内空标签实现。

<span class="name">用户名：<i></i></span>

.name {
    display: inline-block;
    width: 65px;
    height: 18px;
    text-align: justify;

    i {
        display: inline-block;
        width: 100%;
    }
}

即可达到效果