Question

我正在使用React和Ant Design为webapp创建一个简单的UI。我想在屏幕的右上方放置一个按钮。我的组件渲染功能看起来像这样：

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

我尝试将各种内容添加到外部和/或内部dics中，但无法将按钮向右移动-它始终位于左侧。如何使它向右移动？

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 。这将使按钮的行为类似于普通文本。完成上述步骤后，将按钮立即divs text-align属性设置为 right 。希望这会有所帮助。

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

Answer 3

您可以简单地使用flex-box

#button{
  display: flex;
  justify-content: flex-end;
}

<div>
  <div id='button'>
    <button> some button</button>
  </div>
  <div>
    <p> Main conent section </p>
  </div>
</div>

如何在React.js的右侧放置按钮

3 个答案: