HTML 當對齊不起作用時，如何從左到右更改對齊？

Question

我希望按鈕+ 、 count和-向右對齊。 因為右邊的數字占用相同的空間，而左邊的名字有不同的長度。 我希望按鈕位於同一個 position 中，與左側名稱的長度無關。 我在樣式第一個 div 中添加了幾乎所有內容：向右邊距、向右填充、向右對齊。 沒有任何作用，按鈕仍然在同一個 position 中。

html：

<div>
    <li class="list-group-item d-flex justify-content-between lh-sm">
        <h6 class="my-0" style="size: 10px;">{{ item.name }}</h6>
        <div>
            <a class="fab-button red bg-success" style=" float:right;">
                <div class="plus"></div>
            </a>
            <a style="float:right; size: 20px; padding-right: 2mm; padding-left: 2mm;">
                <strong>{{count}}</strong>
            </a>
            <a class="fab-button red bg-success" style=" float:right;">
                <div class="minus"></div>
            </a>
        </div>
        <span class="text-muted">
            {{ item.price }} zł
        </span>
    </li>
</div>

css：

 .fab-button {
    border-radius: 50%;
    display: table;
  }

  .fab-button div {
    background:  rgb(0, 0, 0);
    margin: 11px;
    }

  .fab-button .plus {
    width: 4px;
    height: 4px;
    box-shadow: 0 0 rgb(0, 0, 0), 0 -3px rgb(0, 0, 0), 0 3px rgb(0, 0, 0), -3px 0 rgb(0, 0, 0), 3px 0 rgb(0, 0, 0), 0 -6px rgb(0, 0, 0), 0 6px rgb(0, 0, 0), -6px 0 rgb(0, 0, 0), 6px 0 rgb(0, 0, 0);
  }
  .fab-button .minus {
    width: 4px;
    height: 4px;
    box-shadow: 0 0 rgb(0, 0, 0), -3px 0 rgb(0, 0, 0), 3px 0 rgb(0, 0, 0), -6px 0 rgb(0, 0, 0), 6px 0 rgb(0, 0, 0);
  }

Answer 1

看起來您正在使用bootstrap ，並且基於值具有固定大小，您可以使用此標簽<div class="d-flex justify-content-end">包裝計數器和值

<li class="list-group-item d-flex justify-content-between lh-sm">
  <h6 class="my-0" style="size: 10px;">ssssadaasdsadsadssadsd</h6>
    <div class="d-flex justify-content-end">
      <div class="mx-2">
        <a class="fab-button red bg-success" style=" float:right;">
          <div class="plus"></div>
        </a>
        <a style="float:right; size: 20px; padding-right: 2mm; padding-left: 2mm;">
        <strong>1</strong>
        </a>
        <a class="fab-button red bg-success" style=" float:right;">
          <div class="minus"></div>
        </a>
      </div>
      <span class="text-muted">
         454545 zł
      </span>
  </div>
</li>

在此處查看工作示例