如何使react项目中的两个元素并排

Question

我目前正在尝试创建一个reactjs面板。最近，我一直在尝试在仪表板上添加两个切换按钮来切换"亮模式"one_answers"暗模式"。我想要这些拨动按钮并排坐着。然而，他们目前坐在一起，这不是我想要的。我一直在四处阅读，发现一个简单的方法是添加float：left；去潜水艇，但这对我不起作用。

代码(JSX(：

return (
<div className='parent'>
<div className='toggleButtonDark'>
<ToggleButton
value="check"
selected={selected}
onChange={() => {
setSelected(!selected);
}}
>
<MdDarkMode />
<h5>Dark Mode</h5>
</ToggleButton>
</div>
<div className='toggleButtonLight'>
<ToggleButton
value="check"
selected={selectedBright}
onChange={() => {
setSelectedBright(!selectedBright);
}}
>
<BsFillBrightnessHighFill />
<h5>Light Mode</h5>
</ToggleButton>
</div>
</div>
)

代码(CSS(：

.toggleButtonDark, .toggleButtonLight {
padding: 15px 15px;
float: left;
}

总之，我希望这两个按钮并排放在页面上，而不是放在一起。任何建议都将不胜感激。提前谢谢。

Answer 1

您应该从按钮中删除float，并给父级display: flex。

类似这样的东西：

.parent {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 1rem;
}