怎么通过CSS实现冒号对齐

Question

update:
请注意是两端对齐，而不是简单的右侧对齐。

---

在排版 - ANT DESIGN上看到他们有提到冒号对齐的排版规范，如下图所示，请问怎样用CSS实现冒号对齐的效果？

我想到的解决方案如下：
html结构：

<ul>
<li><div class="title">用户名</div><div class="value">可爱无敌美少女</div></li>
</ul>

css:

li{
  position: relative;
}
.title{
  position: absolute;
  width: 85px;
  text-align: justify;
  text-align-last: justify;
}
.title:after{
  display: inline-block;
  content: '';
  width: 100%;
  height: 0;
}
.title:before{
  position: absolute;
  left: 85px;
  content: '\FF1A';
}
.value{
  padding-left: 110px;
}

请问有没有可能不限定title宽度的条件下，实现冒号对齐，或者有更好的解决方案？

Answer 1

这里有个奇技淫巧。
只要知道最长字符的个数，比如用户名三个字，密码是两个字，在密码中间使用全角符号输入空格。全角一个空格刚好占用一个汉字的宽度。所以其实跟三个字一样的。
半角空格效果：
用户名：
密 码
全角空格效果：
用户名：
密　码：

Answer 2

• 我理解的不限定title宽度的条件，是不需要根据文本内容来设定绝对宽度，如2个字width:40px,4个字width:80px;

• 换一种思路考虑使用%来设宽度，设定一个左侧的初试值27%，当右侧内容不饱和时，左侧可达到自适应的假象效果

• 以下示例中可以删除左侧文本较长的字段，查看左侧自适应效果

https://jsfiddle.net/Alsiso/hkbjcckf/

Answer 3

可以用table布局，然后第一列右对齐，其他列左对齐。

Answer 4

text-align: jusifity; 不过存在兼容问题
或者使用
letter-space: 1em; 这个值根据情况设定特定的属性值

Answer 5

太简单了，不用css啊，用全角空格"&e msp;"，
用户名：
密 码：
邮 箱：
验证码：

Answer 6

空格：    (半个字)  (一个字)

Answer 7

这个最好的方案其实是margin-left: 0.5em