我在表单末尾有 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>
最佳答案
你可以有 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。
关于html - 如何将元素定位到右侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55727892/