如何从溢出文本中右对齐元素答案

【问题标题】：How to right-align element from overflow text如何从溢出文本中右对齐元素
【发布时间】：2019-08-30 11:55:27
【问题描述】：

从溢出文本而不是其父级右对齐。

这是我的示例代码： https://stackblitz.com/edit/react-jjno6n

【问题讨论】：

让我知道您的实际期望。给我一些关于对齐的更多细节以帮助你

标签： css reactjs sass

【解决方案1】：

进一步分析，你的CSS有问题，

像下面这样更改你的 CSS

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

输出

【讨论】：

感谢 Kannan 但实际上要求是右对齐。
糟糕，右对齐意味着右侧 - 购物、付款和确认一一？右对齐还是你需要像上面截图中显示的那样？
整个步骤 1、2 和 3 应该向左移动一点，以便它应该是这样的（见下面的链接）但没有一个恒定值（例如 margin-left：25px） . stackblitz.com/edit/react-qfhfx2

【解决方案2】：

我现在已经创建了一个 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);
}

【讨论】：

【解决方案3】：

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

https://stackblitz.com/edit/react-le2wxp

【讨论】：

几乎，但正如您所看到的，它打破了灰线。如果步处于活动状态（红色），则线路已连接，如果没有，则不应接触步（圆圈）。并且步骤之间的距离应该是恒定的。