Search code examples
htmlcssangularstyles

HTML How to change aligned from left to the right, when aligned not working?

I want the buttons +, count and - to be aligned to the right. Because the numbers on the right take the same space, and the names on the left have different lengths. And I want the buttons to be in the same position, independently of the length of the names on left. I added almost everything to the style first div: margin to right, padding to right, aligned to right. And nothing works, the buttons are still in the same position.

enter image description here

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);
  }
Solution

  • It looks like you are using bootstrap and based value has fixed size you could wrap counter and value with this tag <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>

    Check out Working example here