Align 2 buttons to the right of text

Question

I am trying to make my two buttons appear on the far right of a piece of text. I want the text and two buttons to all be inline with each other but the text is on the left and the two buttons are on the right. I have seen multiple solutions and I could get it to work with only 1 button but when I have two buttons it does not work.

I run a for loop over 'weaknesses' and print out each weakness. Each weakness will have an update and delete action.

I tried to do margin-left but each weakness is a different length so my buttons would not line up

I also tried using some solutions from this post but could not seem to get the expected outcome: Place a button right aligned

Any help would be appreciated

HTML

<div *ngFor="let weakness of weaknesses | async">
    <div class="flex-box">
        <p>{{ weakness }}</p>
        <a class="btn btn-light btn-sm pull-right" href="#">Update</a>
        <button type="button" class="btn btn-danger btn-sm">Delete</button>
    </div>
</div>

Hg0428 · Answer 1 · 2021-12-09T15:03:12.273

2

Try this:

#btnHolder {
  position:fixed;
  top:10px;
  right:10px;
  
}

<p>Text is here</p>
<div id="btnHolder">
    <button>Update</button>
    <button>Delete</button>
</div>

I dont know why it was so hard. It should have been easier to fix this problem.

edited Dec 09 '21 at 15:03

answered Nov 23 '21 at 21:16

Hg0428

316
4
15

From your code snippet it is not outputting the expected result. I am looking to make everything be lined up. So the text is on the left and you have the 2 buttons on the right – Darren_D19 Nov 23 '21 at 21:19
@Darren_D19 I can fix that in the CSS, I just didn't know you needed that. – Hg0428 Nov 23 '21 at 21:20
Oh sorry, hopefully you understand what way I want now, I appreciate your help – Darren_D19 Nov 23 '21 at 21:20
@Darren_D19 I fixed it for you. You can add float: right or whatever else you need. If you want them on separate lines then just add a br. – Hg0428 Nov 23 '21 at 21:24
The buttons now appear in the top right of the screen instead of inside where the text is. I will play around with it – Darren_D19 Nov 23 '21 at 21:29
@Darren_D19 It seems to work for me. It is displaying as |Text Update Delete| – Hg0428 Nov 23 '21 at 21:35
It must be the way I have it written. The above solution worked for me. Thank you for your help though – Darren_D19 Nov 23 '21 at 21:35

score 1 · Accepted Answer · answered Nov 23 '21 at 21:29

1

One solution is auto margin with flex

nav {
  display: flex;
  align-items: center;
}

nav button:first-of-type {
  /* Key here is margin-left needs to be auto */
  margin: 0 10px 0 auto
}

<nav>
  <span>Text</span>
  <button>Button 1</button>
  <button>Button 2</button>
</nav>

answered Nov 23 '21 at 21:29

Phix

9,364
4
35
62

I accidently mentioned 2 buttons but one is an tag. This solution works with 2 buttons. Is there a way to make it work with 1 and 1 button? EDIT - Got it working, thank you :) – Darren_D19 Nov 23 '21 at 21:33
@Hg0428 true, but there's no reason for `position: fixed` (which can cause unintended issues later) or floats (which have been deprecated for some time). – Phix Nov 23 '21 at 22:20

score 0 · Answer 3 · edited Nov 24 '21 at 14:23

0

You should do it like this:

 .flex-box {
      display: flex;
      align-items: center;
      justify-content: start;
  }

 #buttons{
      margin-left: 10px;
  }

  <div class="flex-box">
  <p>Text is here</p>
  <div id="buttons">
   <a>Update</a>
   <button>Delete</button>
 </div>
</div>

edited Nov 24 '21 at 14:23

ouflak

2,458
10
44
49

answered Nov 24 '21 at 13:03

Julianh1805

111
1
1
5

Align 2 buttons to the right of text

3 Answers3