如何与按钮元素在同一行渲染个性化按钮组件

Question

我正在尝试在 React 中呈现几个按钮，以及一个用于特殊用途的专用按钮组件。这是我的代码：

render() {
    return (
        <div id="headerButtons">
            <button id="HomeButton" onClick={this.linkHome}>Home</button>
            <button id="SupportPageButton" onClick={this.linkSupportPage}>Support</button>
            <AccountButton></AccountButton> 
        </div>
    )
}
}

但是，当我运行网页时，AccountButton 内容（现在只是另一个按钮，但它最终会包含多个按钮）呈现在其他两个按钮下方。

知道如何解决这个问题，使它们都呈现在同一水平线上吗？

Answer 1

将包装 div headerButtons css 设置为 flex:

#headerButtons {
  display: flex;
}

也在 AccountButton 使用 fragments 包装按钮，以避免 div 包装器。

关于 flex 的更多信息：

如何与按钮元素在同一行渲染个性化按钮组件

How to render a personalized button component on the same line with button elements

javascript

css

components

styling

reactjs