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

6qftjkof  于 2023-02-03  发布在  React
关注(0)|答案(6)|浏览(509)

我正在使用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>
);

我试过在外部和/或内部dics上添加各种东西,但一直无法将按钮移到右边-它总是停留在左边。我如何使它移到右边?

42fyovps

42fyovps1#

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

试试看,还有,这不是一个React问题,它应该标记为CSS

pb3skfrl

pb3skfrl2#

您可以简单地使用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>
lpwwtiir

lpwwtiir3#

你可以设置按钮显示为 inline-blockinline。这将使按钮的行为像普通文本一样。在上面的步骤之后,设置按钮立即div的文本对齐属性为 right。希望这能有所帮助。
<div style="text-align:right"> <button style="display:inline-block">click me</button> </div>

roejwanj

roejwanj4#

就像这样试试。

<div style={{ display: "flex", justifyContent: 'flex-end'}}>

      <Button onClick={() => this.logout()}>
        Logout
      </Button>

</div>

或者

<div style={{ display: "flex" }}>
    <Button style={{ marginLeft: "auto" }}  onClick={() => this.logout()}>
      Logout
    </Button>
</div>
aor9mmx1

aor9mmx15#

您可以轻松地在样式文件中创建一个类,如下所示:

.flex_end   {
    @include styleclass('flex justify-content-end');
    }

然后将其添加到按钮定义中,如下所示:

<div className='col-12 p-0 pb-1 flex_end'>
    <Button                            
    icon='pi pi-arrow-up-left'
    className='p-button-sm '
    onClick={() => onSelectPrinter()}
    type='button'
    />
</div>

希望这个有用。

4nkexdtk

4nkexdtk6#

This is very simple and useful. Thanks

return (
    <div>
        <div style={{display: 'flex', justify-content: 'flex-end'}}>
            <Button>Logout</Button>
        </div>
        <div>
           {Main components here}
        </div>
    </div>
);

相关问题