Question

我有一个显示用户分数的列表。

这是我的HTML。我希望每个值都对齐。我尝试过不同的选项，比如使用表格和使用网格。我无法以这种方式实现它。徽章永远不会对齐。我可以通过absolute学分的定位来实现它。但那没有回应。

    <div class="inner-counter">
      <div class="profile-credits">
        <span  class="credit">{{auth.user?.hdc}}</span>
        <span >
          <div class="badges" style="background-color: #ffcc00"></div>
        </span>
        <span class="counter-text">
          Books hunted
        </span>
      </div>
      <div class="profile-credits">
        <span class="credit">{{auth.user?.ohc}}</span>
        <span>
          <div class="badges" style="background-color: #ABBBC2"></div>
        </span>
        <span class="counter-text">
          Own hunts
        </span>
      </div>
      <div class="profile-credits">
        <span class="credit">{{auth.user?.hgc}}</span>
        <span>
          <div class="badges" style="background-color: #cc9966"></div>
        </span>
        <span class="counter-text">
          Books hunting
        </span>
      </div>
    </div>

这是绝对定位的CSS。

  .badges{
    display: inline-block;
    height: 8px;
    width: 8px;
    border-radius: 4px;
    margin-left: 4px;
  }
  .counters{
    text-align: center;
    vertical-align: middle;
    margin-top: 30px;
    margin-left: 15%;
  }
  .counter-text {
    padding-left: 10px;
  }
  .profile-credits{
    padding-top: 10px;
    .credit{
      text-align: right;
      position: absolute;
      right: 70%;
    }
  }
  .inner-counter{
    text-align: left;
    display: inline-block;
  }

如何在没有信用绝对定位的情况下。每列左对齐？

Answer 1

https://jsfiddle.net/RemyaJ/n19hdzs6/4/

    .inner-counter {
      display:table;
      }
      .profile-credits {
        display:table-row;
      }
    }
    .badge-wrap {
      display: table-cell;
    }
    .badges{
    height: 8px;
    width: 8px;
    border-radius: 4px;
    margin-left: 4px;
  }
  .counters{
    text-align: center;
    vertical-align: middle;
    margin-top: 30px;
    margin-left: 15%;
  }
  .counter-text {
    padding-left: 10px;
    display: table-cell;
  }
  .profile-credits{
    padding-top: 10px;

  }
  .credit{
      text-align: right;
     display: table-cell;
    }
  .inner-counter{
    text-align: left;
    display: inline-block;
  }

Answer 2

基本上你必须将credit - 类的宽度设置为你想要的宽度。

这是一个有效的版本：

https://codepen.io/selbekk/pen/xdrRNp

另一种方法是使用css-grid或flexbox，但这将是最快的胜利（假设你知道这个积分数量有多大）。

以下是您使用flexbox：https://codepen.io/selbekk/pen/rmwjOz

执行相同操作的方法

Answer 3

没有对齐，因为你的数字可能会增长并推动徽章。你需要让你的号码细胞一起成长。

您还可以查看演示文稿并将编号放在最后。这样你就没有问题了。

Answer 4

我看到最好的方法是将数字放在容器内，并将文本放在另一个容器内的文本中，这样每次数字变大时，这将推动整个容器，它将始终像这样对齐< / p>

使用css垂直对齐徽章

4 个答案: