CSS：如何让列表项的子元素占据剩余空间？

这里给你几个实用的解决思路：

方案1：用原生<li>标签搭配list-style-position: outside #

原生<li>的outside定位不会让标记占用容器内的宽度空间，子元素可以直接设width:100%来铺满剩余区域，完全符合你的需求：

.container {
  width: 500px;
  background: gray;
}

.list-item {
  list-style-position: outside;
  /* 原生<li>默认就是list-item，可省略该属性 */
}

.child {
  display: flex;
  width: 100%;
  justify-content: space-between;
  background: #eee;
}

<div class="container">
  <ul>
    <li class="list-item">
      <div class="child">
        <span>Test</span>
        <span>Test</span>
      </div>
    </li>
  </ul>
</div>

方案2：给自定义列表项预留标记空间 #

如果必须用<div>模拟列表项，可以给.list-item设置padding-left避开标记位置，让子元素正常铺满：

.container {
  width: 500px;
  background: gray;
}

.list-item {
  list-style-position: inside;
  display: list-item;
  padding-left: 2em; /* 预留标记的宽度 */
  position: relative;
}

/* 将标记移到padding区域内 */
.list-item::marker {
  position: absolute;
  left: 0;
}

.child {
  display: flex;
  width: 100%;
  justify-content: space-between;
  background: #eee;
}

<div class="container">
  <div class="list-item">
    <div class="child">
      <span>Test</span>
      <span>Test</span>
    </div>
  </div>
</div>

方案3：用CSS计数器自定义标记 #

完全自定义标记的样式和位置，彻底避免标记对子元素宽度的干扰：

.container {
  width: 500px;
  background: gray;
}

.list-item {
  counter-increment: list;
  padding-left: 2em;
  position: relative;
}

/* 自定义标记样式，可替换为任意符号 */
.list-item::before {
  content: counter(list) ".";
  position: absolute;
  left: 0;
}

.child {
  display: flex;
  width: 100%;
  justify-content: space-between;
  background: #eee;
}

<div class="container">
  <div class="list-item">
    <div class="child">
      <span>Test</span>
      <span>Test</span>
    </div>
  </div>
  <div class="list-item">
    <div class="child">
      <span>Another Test</span>
      <span>Another Test</span>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者bravesheeptribe