一个很简单的问题:如何将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; /*使元素成为行内块元素*/