链接 在显示 Flex 中具有 100% 宽度，不要

Question

我希望我的按钮向右对齐，无论容器是什么（所以没有弹性父级）。 所以我想使用 margin-left: auto 将按钮推到右侧。我知道其他解决方案（浮动、弯曲等），但想知道为什么会附加此行为。

这是我的问题：
这项工作关于<按钮>但不与 < a＞标签。
<< a＞似乎缩放到 100% 宽度。

这是说明问题的示例：

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

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

我搜索隐藏的用户代理属性但找不到任何内容。

这是来自<的本机行为吗？ a >，或者可能是 margin-left: auto 奇怪的行为？ 如果有人有想法？

与引导实用程序相同：

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

<div class="ms-auto w-25">This is working</div>

<a class="ms-auto w-25">This is not working</a>

为什么这不适用于 < a＞标签？

Answer 1

按钮有点特殊，其行为与链接不同。您可以使用 table 代替 flex 来获得相同的行为

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

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

Answer 2

我发现了同样的问题，并通过向内部链接添加 包装器并将其设置为 inline-block 来创建解决方法

.common {
  --color: green;
  border: 3px solid var(--color);
  background-color: var(--color);
  text-decoration: none;
  padding: 0.5em 1em;
  color: white;
}

.flex {
  display: flex;
}

.link {
  display: inline-block;
}

div + div {
  margin-top: 1em;
}

<div>
  <button class="common flex">I am a Button with flex</button>
</div>

<div>
  <a class="common flex" href="https://www.google.com" target="_blank">Link with flex goes 100%</a>
</div>

<div>
  <a class="common link" href="https://www.google.com" target="_blank"><span class="flex">Link with wrapper</span></a>
</div>

https://codepen.io/pikilon/pen/KKBpdKg?editors=1100

Answer 3

为了让边距自动工作，您还需要指定宽度，
因此，要使用 margin auto 将其推到右侧，您必须使用以下命令：

button, a {
    display: flex;
    margin: 0 0 0 auto;
    width: 50px;
}

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

另外，我建议您使用 display: block; 而不是 flex 。或者如果您不希望它是全宽的，则使用内联块。如果您不打算使用 Flexbox，我认为没有必要包含它。

不过，它的 Flex 版本会更容易和干净，你可以这样做：

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

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

Answer 4

因为按钮是块级元素，而 a 是锚内联元素，这就是为什么 margin-left: auto;不适用于锚标记。

您可以尝试：

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

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

Answer 5

您还可以使用此代码来设置它的位置

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