html - 在跨度内右对齐数字的最简单方法。想不通

Question

这应该很容易，但似乎无法弄清楚发生了什么。我需要让下面屏幕截图中的数字右对齐 - 它们左对齐。我试过正确对齐文本，但这似乎没什么用。有任何想法吗？谢谢

这是标记。

<a class="tile" data-bind="attr: { href: $root.getSearchPath($data) }" href="/#products/quicksearch/_test-my_products">
    <div class="left">
        <span class="title" data-bind="text:$data.display_name, attr: { title: $data.display_name }" title="Example Product Search">Example Product Search</span>
    </div>
        <div class="divider"></div>
          <span class="number">
                <i class="fa fa-refresh fa-spin loader" data-bind="visible:($data.loading())" style="display: none;"></i>
                <span data-bind="visible:(!$data.loading()), text: $data.count" style="">51</span>
            </span>
</a>

//SCSS

  .tile {
    color: $tundora;
    display:flex;
    float:left;
    border:1px solid $alto;
    //width:190px;
    margin:0 14px 20px 0;
    text-transform:uppercase;
    background-color: $gallery;
    line-height:15px;
    height:67px;
    transition: background .1s ease-out;
  }

  .number {
   display:inline-flex;  
   margin:0 0 0 18px;
   font-size:$font-largest;
   align-items:center;
   width:73px;
   text-align:right
  }

  .left {
  float:left;
  width:calc(100% - 75px);
  overflow:hidden;
 }

Answer 1

将 justify-content: flex-end; 添加到 .number 选择器。

.tile {
  color: $tundora;
  display: flex;
  float: left;
  border: 1px solid $alto;
  //width:190px;
  margin: 0 14px 20px 0;
  text-transform: uppercase;
  background-color: $gallery;
  line-height: 15px;
  height: 67px;
  transition: background .1s ease-out;
}

.number {
  display: inline-flex;
  margin: 0 0 0 18px;
  font-size: $font-largest;
  align-items: center;
  width: 73px;
  justify-content: flex-end;
}

.left {
  float: left;
  width: calc(100% - 75px);
  overflow: hidden;
}

<a class="tile" data-bind="attr: { href: $root.getSearchPath($data) }" href="/#products/quicksearch/_test-my_products">
  <div class="left">
    <span class="title" data-bind="text:$data.display_name, attr: { title: $data.display_name }" title="Example Product Search">Example Product Search</span>
  </div>
  <div class="divider"></div>
  <span class="number">
					<i class="fa fa-refresh fa-spin loader" data-bind="visible:($data.loading())" style="display: none;"></i>
					<span data-bind="visible:(!$data.loading()), text: $data.count" style="">51</span>
  </span>
</a>