link <a> has 100% width in display flex, <button> don't-CodePudding

I want my button to be aligned to the right, no matter the container (so no flex parent). So i want to use a margin-left: auto to push the button to the right. I'm aware of other solutions (float, flex,...) but want to know why this behaviour append.

Here is my problem :
This work on < button > but not with < a > tag.
The < a > seems scale to 100% width.

Here is a sample that illustrate the problem :

a, button {
  display: flex;
  margin-left: auto;
}

<a href="">test</a>
<br>
<button>test</button>

I searched for hidden user agent properties but could'nt find anything.

Is this a native behaviour from < a >, or maybe a margin-left: auto weird behaviour ? If someone has an idea ?

Same with bootstrap utility :

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div >This is working</div>

<a >This is not working</a>

Why is this not working on < a > tags ?

CodePudding user response：

Because button is a block-level element and a is anchor inline element that's why margin-left: auto; not working on the anchor tag.

You can try:

a, button {
  display: flex;
  margin-left: auto;
  justify-content:flex-end;
}

<a href="">test</a>
<br>
<button>test</button>

CodePudding user response：

You can also use this code to set it's position

button a {
display:flex;
position: absolute;
right:0;
flex-wrap:wrap;
}

CodePudding user response：

can't you just use float: right;?

a, button {
  display: flex;
  float: right;
}

<a href="" >test</a>
<br>
<button>test</button>