Question

我在表单末尾有2个按钮。我正在使用样式化的组件并做出反应。问题在于，当隐藏了左对齐按钮时，应该留在右侧的另一个按钮位于左侧。以下是我的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。

Answer 2

您是否使用display: none隐藏元素？如果是这样，您可能应该切换为使用visibility: hidden。

display: none将从页面上完全删除该元素，而visibility: hidden将隐藏该元素，但同时保留其占用的空间。

Answer 3

您可以简单地使用text-align将右按钮向右对齐，因为这是内联元素的默认对齐方式，所以左按钮将始终保持左对齐。在下面的建议中，我将div用作一行，并且在其中两个div的最大宽度为50％。

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col-50 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.text-right {
  text-align: right;
}

<div class="row">
  <div class="col-50">
    <button>
      Go Back
    </button>
  </div>
  <div class="col-50 text-right">
    <button>
      Next Step
    </button>
  </div>
</div>

如何在右边强制对齐元素？

3 个答案: