Debug-002-前端如何以4个li标签中的“:“的实现竖直方向对齐

一个很简单的问题：如何将1转换成2的形式。

具体来说就是这四个li以冒号垂直方向对齐，并且后面的内容改变颜色。

		<ul class="card">
                <li>

                    协议名称：产品协议111
                </li>
                <li>
                    创建时间：2024.05.06
                </li>
                <li>
                    操作人：RMS
                </li>
                <li>
					说明：QWER+ASDF
                </li>
        </ul>

方法一：

（1）这里现将页面中每一个<li>标签中插入两个<span>,第一个放标题部分（或者说是以冒号结尾的部分），第二个放内容。修改如下： 
 

		<ul class="card">
                <li>
                  <span>协议名称：</span>
				  <span>产品协议111</span>
                </li>
                <li>
                  <span>创建时间：</span>
				  <span>2024.05.06</span>
                </li>
                <li>
                  <span>操作人：</span>
				  <span>RMS</span>
                </li>
                <li>
					<span>说明：</span>
                    <span>QWER+ASDF</span>
                </li>
        </ul>

（2）利用伪元素进行处理，代码如下：

		li span:first-child{ /*li标签中第一个span*/
			display: inline-block; /*使元素成为行内块元素*/
			text-align: end;  /* 靠右对齐*/
			width: 100px;	/*注意:这里必须有一个宽度*/
		}
		
		li span:last-child{/*li标签中最后一个span*/
			color: aquamarine;
		}

 即可实现效果。

方法二：之后再补充

注：（1）利用伪元素

       （2）利用display: inline-block; /*使元素成为行内块元素*/