中间元素获取元素之间的所有空间

Question

我想将样式列表如下：

我尝试使用以下HTML代码：

<ul>
  <li>
    <span class="label">a</span>
    <span class="middle-separator"></span>
    <span class="data">aaa</span>
  </li>
</ul>

但我无法弄清楚CSS如何在中间元素上具有动态大小。

Answer 1

一个可能性是使用flex来使中间分隔符生长

应用此样式：

li {
  list-style: none;
  display: flex;
}

.middle-separator {
  flex: 1;
  border-bottom: 1px solid;
}