CSS:文本字数不一致 实现文本两端对齐——text-align属性，::after，伪元素，绝对定位，相对定位，position: absolute，position: relative

初始样式：

	<section>
          <div class="kuan-15">
            <span class="labelStyle">病历号:</span>
            <span class="labelStyle1">{{ XXXX }}</span>
          </div>
          <div class="kuan-15">
            <span class="labelStyle">姓名:</span>
            <span class="labelStyle1">{{ XXXX }}</span>
          </div>
          <div class="kuan-15">
            <span class="labelStyle">性别:</span>
            <span class="labelStyle1">{{
              XXXX == "F" ? "女" : "男"
            }}</span>
          </div>
          <div class="kuan-15">
            <span class="labelStyle">婚姻:</span>
            <span class="labelStyle1">{{ XXXX }}</span>
          </div>
          <div class="kuan-20">
            <span class="labelStyle">出生日期:</span>
            <span class="labelStyle1">{{ XXXX }}</span>
          </div>
    </section>

<style>
	.kuan-15 {
	        width: 15%;
	    }
    .labelStyle{
        margin-left: 5px;
        color: #666;
        font-size: 14px;
        text-align: right;
        width: 100px;
    }
    .labelStyle1{
        margin-left: 25px;
        color: #111;
        font-size: 14px;
        text-align: left;
    }
</style>

修改后样式：

```javascript
<style>
	.kuan-15 {
	        width: 15%;
	    }
    .labelStyle{
        margin-left: 5px;
        color: #666;
        font-size: 14px;
        width: 100px;
        //设置相对labelStyle定位
        position: relative;
        //实现文本两端对齐
        text-align-last: justify;
    }
    .labelStyle::after{
    //在文本后添加冒号
    	content: ':';
    	//设置绝对定位，
        position: absolute;
        right: -10px;
    }
    .labelStyle1{
        margin-left: 25px;
        color: #111;
        font-size: 14px;
        text-align: left;
    }
</style>

想要做到这种效果有几点需要注意：

1. 标题必须有宽度，一般为最长标题的适宜宽度，不确定宽度有没有加上，可以设置一个背景色
2. text-align: justify;实现两端对齐文本效果，但是如果你直接使用没有效果，需要 text-align-last，把段落的最后一行向右对齐，只有在 justify 时才起作用
3. 冒号不能加在写标题的标签里面，不然也会被等分
4. ::after 伪元素可以在元素的内容之后插入新内容，必须和content属性结合使用，content不能没有，内容至少为空；伪元素的display默认为inline，可以自己改（也可以另起一行标签加冒号，就是有点麻烦）
5. 需要绝对定位来让冒号浮起来，就不会被等分，可以标题的宽度是固定的，所以位置自己调

参考了以下两篇文章

CSS:文本字数不一致 实现文本两端对齐——text-align属性
css中::before ::after的用法