CODEWITHSUNDEEP
htmlcssangular
Darren_D19
Darren_D19

Reputation: 121

Align 2 buttons to the right of text

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>

Upvotes: 0

Views: 1504

Answers (3)

Hg0428
Hg0428

Reputation: 330

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.

Upvotes: 2

Julianh1805
Julianh1805

Reputation: 111

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>

Upvotes: 0

Phix
Phix

Reputation: 9890

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>

Upvotes: 1

Related Questions