前端 - CSS问题，这种怎么做到？

Question

，文字前面跟着已到期或者即将到期，但是这段文字是右对齐，且以最长文本的长度作为整个盒子的宽度，并设置背景色。

Answer 1

可以使用table进行布局，第一列文字右对齐，背景设置颜色

Answer 2

<div class="container">    <span class="text">文本1</span>    <span class="label red-bg">已到期</span></div><div class="container">    <span class="text">文本2</span>    <span class="label orange-bg">即将到期</span></div>

.container {    display: flex;    justify-content: flex-end;    align-items: center;    margin-bottom: 10px;}.label {    padding: 5px;    margin-left: 10px;}.red-bg {    background-color: red;}.orange-bg {    background-color: orange;}.text {    white-space: nowrap;}