Css 如何从溢出文本右对齐元素

从溢出文本（而不是其父文本）右对齐

以下是我的示例代码：

---

进一步分析，您的CSS有一个问题

如下图所示更改CSS

.CheckoutSteps {
    /* display: inline-flex; */
    /* align-items: center; */
    align-items: flex-start;
    display: flex;
    justify-content: center;
 }

输出

我强烈建议你阅读这篇文章

---

我现在已经创建了一个hack，哈哈

componentDidMount() {
  this.checkMargin();
}

checkMargin() {
  setTimeout(() => {
    const paddingRight =
      (document.querySelector(
        ".CheckoutSteps .Step:last-child .StepLabel span"
      ).clientWidth - 40) / 2;
    document.querySelector(
      ".CheckoutSteps"
    ).style.paddingRight = `${paddingRight}px`;
  }, 200);
}

这就是你想要达到的目标吗，我的朋友？问题是容器有一个固定的大小，我不知道这是一个要求，还是只是做一个“圆”

---

让我知道您的实际期望。给我更多关于对齐的细节，以帮助yoiThanks Kannan，但要求实际上是，它应该是右对齐的。哦，好的，右对齐意味着右对齐-购物、付款和逐一确认？右对齐或u需要与上面屏幕截图中显示的类似？整个步骤1、2和3应该向左移动一点，这样它应该是这样的（参见下面的链接），但没有一个常量值（例如，左边距：25px）。几乎，但正如你所看到的，它阻止了灰线。如果步骤处于激活状态（红色），则线路已连接，如果未连接，则不应接触步骤（圆圈）。台阶之间的距离应该是恒定的。