Question

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

第一行中的选择菜单与下方的选择菜单不对齐。这个问题似乎是因为在第一行有两个值＆＃34; 10＆＃34;而在另一个中只有一个值＆＃34; 0＆＃34;。

您知道如何解决问题，因此选择菜单始终与值的sie无关地居中对齐吗？

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

如何让选择菜单中心与值无关？

1 个答案: