css label两端对齐

         

上面这种效果很常见,实现的代码如下：

html部分

<ul>
    <li class="detail_item">
        <span class="detail_label">定位时间</span>：
        <span class="detail_value">11111</span>
    </li>
    <li class="detail_item">
        <span class="detail_label">当前速度</span>：
        <span class="detail_value">11111</span>
    </li>
    <li class="detail_item">
        <span class="detail_label">驾驶员</span>：
        <span class="detail_value">11111</span>
    </li>
    <li class="detail_item">
        <span class="detail_label">用车人</span>：
        <span class="detail_value">11111</span>
    </li>
    <li class="detail_item">
        <span class="detail_label">出车任务</span>：
        <span class="detail_value">11111</span>
    </li>
    <li class="detail_item">
        <span class="detail_label">位置</span>：
        <span class="detail_value">11111</span>
    </li>
</ul>

css部分（需要用到less或者scss）

.detail_item {
    line-height: 15px;
    padding-left: 10px;
.detail_label {
    display: inline-block;
    width: 60px;
    text-align: justify;
    vertical-align: top;
&::after {
    display: inline-block;
    width: 100%;
    content: '';
    height: 0;
}
}
.detail_value {
    padding-right: 10px;
}
}

转载于:https://www.cnblogs.com/qinacao/p/10481987.html