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

Question

我正在尝试在反应中渲染几个按钮，以及用于特殊目的的专用按钮组件。这是我的代码：

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 内容（现在只是另一个按钮，但最终会包含几个按钮）呈现在其他两个按钮下方。

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

标签： javascriptcssreactjscomponentsstyling

Answer 1

将包装 div headerButtonscss 设置为 flex：

#headerButtons {
  display: flex;
}

还可以AccountButton使用片段来包装您的按钮，以避免使用div包装器。

更多关于flex：