css - 如何让选择菜单居中对齐而不依赖于值？

Question

我在下面有这个 html，但有一个问题我不明白如何解决。

第一行的选择菜单没有与下面的选择菜单居中对齐。这个问题似乎是因为在第一行中有两个值“10”，而在另一行中只有一个值“0”。

您知道如何解决这个问题，使选择菜单始终居中对齐，而不受值的影响吗？

<div class="card">
  <div class="card-header d-flex justify-content-between">
    <span class="font-weight-bold text-heading-blue font-size-sm">Item 0</span>
    <span class="ml-auto mr-3 text-heading-blue font-weight-bold font-size-sm">Item 1</span>
    <span class="text-heading-blue font-weight-bold font-size-sm">Item 2</span>
  </div>
  <div class="card_body">
    <ul class="list-group list-group-flush">

      <li class="list-group-item d-flex align-items-center justify-content-between">
        <div>
          <span class="font-weight-semi-bold text-heading-blue">Title 1</span>
        </div>
        <form class="ml-auto mr-5">
          <select class="custom-select form-control text-heading-blue font-size-xsm">
            <option selected="">1</option>
            <option>2</option>
            <option>3</option>
          </select>
        </form>
        <span class="font-size-sm">10</span>
      </li>
      <li class="list-group-item d-flex align-items-center justify-content-between">
        <div>
          <span class="font-weight-semi-bold text-heading-blue">Title2 </span>
        </div>
        <form class="ml-auto mr-5">
          <select class="custom-select form-control text-heading-blue font-size-xsm">
            <option selected="">1</option>
            <option>2</option>
            <option>3</option>
          </select>
        </form>
        <span class="font-size-sm">0</span>
      </li>
    </ul>

  </div>
</div>

https://jsfiddle.net/ct1g9d4a/2/

Answer 1

由于 list-group-items 是 display:flex，所以将 2 个外部列设置为 w-100 以便它们填充该行。然后选择将始终居中。

https://www.codeply.com/go/jDUdYMQglG

<div class="card_body">
    <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex align-items-center justify-content-between">
            <div class="w-100">
                <span class="font-weight-semi-bold text-heading-blue">Title 1</span>
            </div>
            <form>
                <select class="custom-select form-control text-heading-blue font-size-xsm">
                    <option selected="">1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </form>
            <div class="font-size-sm w-100 text-right">10000</div>
        </li>
        <li class="list-group-item d-flex align-items-center justify-content-between">
             <div class="w-100">
                <span class="font-weight-semi-bold text-heading-blue">Title2 </span>
            </div>
            <form>
                <select class="custom-select form-control text-heading-blue font-size-xsm">
                    <option selected="">1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </form>
            <div class="font-size-sm w-100 text-right">0</div>
        </li>
    </ul>
</div>