类似图片中的布局如何实现？

Question

让感叹号对齐。字体自动分开相应的距离。

Answer 1

<style>
.title{text-align: justify;text-align-last: justify;}
</style>
<div>
   <table>
     <tr>
       <td class="title">立案日期</td>
       <td>:</td>
     </tr>
      <tr>
       <td class="title">案号</td>
       <td>:</td>
     </tr>
     <tr>
       <td class="title">当事人</td>
       <td>:</td>
     </tr>
     <tr>
       <td class="title">案由</td>
       <td>:</td>
     </tr>
   </table> 
  </div>

Answer 2

text-align-last: justify

demo：
https://codepen.io/jackpan/pe...

Answer 3

这种我一般输入法的全角解决的，换成全角的，这时按空格就是中文的一个字符空格。

<td>立案日期：</td>
<td>案　　号：</td>

Answer 4

前面的字所在元素写成一样大，text－align：justify；然后都加一个after伪元素，content为“：”定位到后面

Answer 5

text-align-last: justify

楼主可以了解一下这个。还有多个属性的。