如何在reactjs中将按钮放在右侧

Question

我正在使用 React 和 Ant Design 为 Web 应用程序创建一个简单的 UI。我想在屏幕的右上角放置一个按钮。我的组件渲染函数看起来像这样：

return (
    <div style={{something here?}}>
        <div style={{something else here?}}>
            <Button>Logout</Button>
        </div>
        <div>
           {Main components here}
        </div>
    </div>
);

我尝试过向外部和/或内部圆盘添加各种东西，但无法将按钮移动到右侧 - 它始终保留在左侧。如何让它向右移动？

Answer 1

return (
    <div style={{}}>
        <div style={{float: 'right'}}>
            <Button>Logout</Button>
        </div>
       <div style={{clear: 'both'}}></div>
        <div>
           {Main components here}
        </div>
    </div>
);

另外，尝试一下，这不是一个 React 问题，它应该标记为 CSS

Answer 2

您可以将按钮显示设置为inline-block或inline。这将使按钮表现得像普通文本。完成上述步骤后，将按钮立即 div 的 text-align 属性设置为right。希望这可以帮助。

<div style="text-align:right"> <button style="display:inline-block">click me</button> </div>