锚点和按钮元素使用相同的样式时呈现不同。

Question

正如标题所述-我将锚点和按钮设置为flex，但它们的尺寸不同。为什么会这样？如何在两个元素上实现自动宽度并获得相同的视觉效果？

a,
button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  background: orange;
  margin-bottom: 20px;
  padding: 10px;
  height: 50px;
  margin: 0;
}

<a href="#">asdf</a>
<button>asdf</button>

- 1nspir3

---

锚点和按钮具有不同的内在样式，这使得它们呈现出不同的效果。使用flex: 1/2或类似的方法来实现。 - Rajesh Paudel

@RajeshPaudel 在这种情况下，a或button是一个flex容器。我应该在哪个元素上使用flex: 1/2？ - 1nspir3

抱歉，我的意思是如果它在内部，你需要使用flex: 1/2。但这种行为主要是由两个盒子大小造成的：内容框和边框框。 - Rajesh Paudel

应该在容器上设置flex，在单个子元素上设置是没有意义的。 - Mat J

也许这会有所帮助 https://dev59.com/wFsW5IYBdhLWcg3wDzgu - Huangism

Answer 1

这个问题是由于引擎不允许button具有其他显示属性而导致的。将button包裹在span中是最简单的解决方案。

<a href="#">asdf</a>
<span><button>asdf</button></span>

a, span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  background: orange;
  margin-bottom: 20px;
  padding: 10px;
  height: 50px;
  margin: 0;
}

- pso

---

这其实不是同一件事。 - Huangism

能否解释一下为什么@Huangism？ - pso

你的按钮是一个flex子项，而OP的按钮则是应该成为flex容器。 - Huangism

好的，他们没有指定它需要是一个弹性容器。 - pso

Answer 2

Here, in `width:auto`, auto tells the default value. The browser calculates the width.

同时它们是不同的元素。

div {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
 align-items: center;
}
a, 
button {
  width: auto;
  background: orange;
  padding: 30px;
  margin: 0;
}
a {
  padding-bottom:31px;
}

<div>
  <a href="#">asdf</a>
  <button>asdf</button>
</div>

- MagnusEffect

---

OP要求当锚点和按钮显示为flex时，它们不作为flex项。 - Huangism

这是正确的，但是，拜托，问题中很明显，比较锚点和按钮时两者都是 flex 容器。 - Huangism

Answer 3

这取决于引擎，但浏览器中最可能出现这种情况的原因是由于 CSS 的 box-sizing 属性。MDN 将 box-sizing 定义为：

在 CSS 盒子模型中，默认情况下，您分配给元素的宽度和高度仅应用于元素的内容框。如果元素具有任何边框或填充，则会将其添加到宽度和高度中，以得到呈现在屏幕上的盒子的大小。这意味着当您设置宽度和高度时，必须调整给定的值，以适应可能添加的任何边框或填充。例如，如果您有四个宽度为 25% 的框，如果任何一个具有左边或右边填充或左边或右边边框，则它们默认情况下将不适合父容器的约束条件中的一行。

您可以在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing 如何使用

但最接近的方法是使用 inherit 作为宽度。这将导致元素从父级继承宽度。

// Resetting both to have same type for similar render
a,button {
  box-sizing: content-box;
  border: unset;
}

a,
button {
  display: flex;
  align-items: center;
  justify-content: center;

  background: orange;
  margin-bottom: 20px;
  padding: 10px;
  height: 50px;
  margin: 0;
}

// Add width to parent element
.w-100 {
   width: 100vw;
}
// This will cause the default width behaviour to inherit from parent
a,button {
  width: inherit;
}

<div class="w-100">
  <a href="#">asdf</a>
  <button>asdf</button>
</div>

- Rajesh Paudel

---

在Mac上的Chrome浏览器中没有看到任何区别。 - Huangism

Answer 4

我的问题由两部分组成：

1. button 和 a 渲染方式不同
2. 我希望在这个例子中，a 的渲染方式与 button 相同。因此，我设计的组件不会让用户进行包装等操作。

正确的答案是设置 width 属性为 fit-content。它在大多数浏览器上都有很好的支持，我会尝试使用它。

非常感谢您的回答！

- 1nspir3

---

这是想作为答案吗？如果是，请更清晰地展示哪些部分起作用了。 - isherwood