CSS实现文字两端对齐text-align: justify; text-align-last: justify; 实现

在布局中, 有时会遇到这样的布局,尤其是在表单中, 要求, 较短的文字要两端对齐:

对于这种布局可以使用 text-align: justify; text-align-last: justify; 两个css样式来实现:

    label {
      width: 100px;
      display: inline-block;
      text-align: justify;
      text-align-last: justify;
    }

但是这两个css在chrome和fire-fox中的表现也是不一致的, 在fire-fox中, 要求中文文字之间至少有一个空格才能实现两端对齐的效果

<div>
  <label for="name">姓 名</label>：<input id="name" type="text">
</div>  
<div>
  <label for="address">homeaddr.</label>：<input id="address" type="text">
</div>  
<div>
  <label for="mail">e-mail</label>：<input id="mail" type="text">
</div>  
<div>
  <label for="mobile">电 话 号 码</label>：<input id="mobile" type="text">
</div>