Source:  Twitter logo

I am creating a simple UI for a webapp using React and Ant Design. I would like to place a Button at the top right of the screen. My component render function looks something like this:

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

I have tried adding various things to the outer and/or inner dics and have not been able to move the button to the right - it always stays on the left. How do I make it move to the right?

You can simply use 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>
4 users liked answer #0dislike answer #04
Code Maniac profile pic
Code Maniac
return (
    <div style={{}}>
        <div style={{float: 'right'}}>
            <Button>Logout</Button>
        </div>
       <div style={{clear: 'both'}}></div>
        <div>
           {Main components here}
        </div>
    </div>
);

Try that, also, this is not a React question, it should be tagged CSS

3 users liked answer #1dislike answer #13
mikeb profile pic
mikeb

You can set buttons display to inline-block or inline. This will make the button to behave like normal text. After the above step set the buttons immediate divs text-align property to right. Hope this helps.

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

1 users liked answer #2dislike answer #21
Priyesh Diukar profile pic
Priyesh Diukar

Just try like this.

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

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

</div>

Or

<div style={{ display: "flex" }}>
    <Button style={{ marginLeft: "auto" }}  onClick={() => this.logout()}>
      Logout
    </Button>
</div>
1 users liked answer #3dislike answer #31
Pramuditha profile pic
Pramuditha

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).