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

Question

我有两个按钮。

它们具有完全相同的类。

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

页面上的所有其他按钮都像“声明”按钮一样呈现全宽。这些按钮的右侧没有任何内容。我尝试刷新浏览器缓存和 Laravel 的视图缓存。你看到的课程来自 Tailwind 和 Bulma，除了：

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

这里会发生什么？

更新：

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

• 删除了 app.scss 中的所有自定义 css
• 创建了一个演示组件，只包含一个带有“按钮”类 div 的容器
• 直接在 main 中单独渲染

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

更新 2

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

有人可能知道确切的问题是什么？可惜我没有。

Answer 1

我被告知不要将我自己的问题标记为已解决，因此我正在编写我在此处找到的解决方案。

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

修改“按钮”或“按钮”类不起作用，但我现在知道我需要使用 .buttons:not(:last-child) {}。但是，切换到 is-fullwidth 更有意义。

Answer 2

如果两个按钮具有相同的填充，它可能只是按钮文本的长度。 “Declaim”比“Claim”长。

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

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