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

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。布尔玛使用了一个边距来检查is-fullwidth，但显然不知道w-full。

修改“按钮”或“按钮”类没有用，但是我现在知道我需要使用.buttons：not（：last-child）{}。但是，切换为is-fullwidth更有意义。

Answer 2

如果两个按钮的填充相同，则可能只是按钮文本的长度。 “声明”比“声明”长。

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

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