为什么这些按钮的宽度完全相同 类 不同？

Question

我有两个按钮。

它们具有完全相同的 classes。

但是一个莫名其妙地比另一个宽。

页面上的所有其他按钮都像 "Declaim" 按钮一样呈现全宽。这些按钮的右边没有任何东西。我尝试刷新浏览器缓存和 Laravel 的视图缓存。你看到的 classes 来自 Tailwind 和 Bulma，除此之外没有被我触及：

.button:active {
    position:relative;
    top:2px;
}

这里可能发生了什么？

更新：

回应 Phix 和 Saqib，是的，它确实有一个 flex 的祖父母，但我

• 已删除 app.scss
中的所有自定义 css
• 创建了一个演示组件，其中只有一个 div 为 class 的容器 "buttons"
• 直接在 main 中单独渲染它

令人难以置信的是，我仍然遇到同样的问题。没有 class "buttons" 的 div，按钮大小相同。但我不明白为什么 "buttons" 会这样做。

更新 2

这是我设置固定宽度时发生的情况：

有人可能知道到底哪里出了问题？很遗憾我没有。

Answer 1

如果两个按钮的内边距相同，则可能只是按钮文本的长度。 "Declaim" 比 "Claim" 长。

尝试添加固定宽度并 box-sizing: border-box; 以在宽度中包含填充。

另外a的默认位置是inline-block。尝试将其设置为 block.

Answer 2

我被告知不要将我自己的问题标记为已解决，所以我正在写我在这里找到的解决方案。

问题在于混合使用 Tailwind 和 Bulma。解决方案是使用 is-fullwidth 而不是 w-full。 Bulma 应用了检查 is-fullwidth 的边距，但显然不知道 w-full。

修改 "buttons" 或 "button" 类 无效，但我现在知道我需要使用 .buttons:not(:last-child) {}。但是，切换到 is-fullwidth 更有意义。