html - 如何将元素定位到右侧？

Question

我在表单末尾有 2 个按钮。我正在使用样式化的组件并使用react。问题是，当左对齐按钮被隐藏时，另一个应该留在右边的按钮会出现在左边。下面是我的 css(和布局截图)，我需要添加/更改什么？

const ButtonsContainer = styled.div`
  display: flex;
  justify-content: space-between;
`;

同时jsx部分的代码

      <div>
        <ButtonsContainer>
          {tabIndex != 0 && (
              <Button
                label=" Go Back"               
              />
          )}
          {nextStep > 0 && (
              <Button                  
                label=" Next Step"
              />
          )}
        </ButtonsContainer>
      </div>

Answer 1

你可以有 2 个 flex 容器，一个用于左按钮，另一个用于右按钮:

(仅限 CSS)

.buttons-container {
   display: flex;
}

.button-left {
   flex: 0 0 50%;
   display: flex;
   justify-content: flex-start;
}

.button-right {
   flex: 0 0 50%;
   display: flex;
   justify-content: flex-end;
}

<div class="buttons-container">
   <div class="button-left"><button></button></div>
   <div class="button-right"><button></button></div>
</div>

抱歉，我不知道样式组件，但我相信你明白了。

还有其他技巧，你应该花点时间研究一下flexbox。