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;
}
}