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

我有两个按钮

他们有完全相同的课程

但其中一个比另一个宽得令人费解

页面上的所有其他按钮都会像“Declaim”按钮一样呈现全宽。这些按钮右边什么也没有。我尝试刷新我的浏览器缓存和Laravel的视图缓存。您看到的课程来自Tailwind和Bulma，除以下内容外，我从未接触过这些课程：

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

这里会发生什么

更新：

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

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

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

更新2

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

---

也许有人知道这到底是怎么回事？不幸的是，我没有。

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

尝试添加固定宽度和

框大小：边框框

以在宽度中包含填充

---

另外，内联块的默认位置是

内联块

。尝试将其设置为

block

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

尝试添加固定宽度和

框大小：边框框

以在宽度中包含填充

---

另外，内联块的默认位置是

内联块

。尝试将其设置为

块

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

问题是混合了顺风和布尔马。解决方案使用的是全宽而不是w-full。Bulma应用了一个边距，检查其是否为全宽，但显然不知道是否为全宽

---

修改“buttons”或“button”类不起作用，但我现在知道我需要使用。但是，切换到is fullwidth更有意义。

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

问题是混合了顺风和布尔马。解决方案使用的是全宽而不是w-full。Bulma应用了一个边距，检查其是否为全宽，但显然不知道是否为全宽

---

---

修改“buttons”或“button”类不起作用，但我现在知道我需要使用。但是，切换到is fullwidth更有意义。

父容器是否灵活？根据您的屏幕截图，索赔按钮有一些边框。尝试查找给定给子w.r.t父容器的任何边界。另外，如果你能重新创建一个简单的演示，那就太好了。拥有相同的类并不意味着相同的风格。例如，通过n-child（）或

+

选择器等，可能会产生不同的影响。您能提供更多的代码吗？最好是尽可能最小、可复制的代码。或者是一个链接？让我们知道我们可以做什么。谢谢：）我确实在Bulma样式中看到了这样的：

.hero buttons.button:not（：last child）{margin right:1.5rem；}

-这似乎就是您遇到的或类似的选择器。。。最好在DOM inspector中查看影响元素的所有样式，而不是像屏幕截图中那样在其上悬停。父容器是否灵活？根据屏幕截图，Claim按钮有一些边框。尝试查找给定给子w.r.t父容器的任何边界。另外，如果你能重新创建一个简单的演示，那就太好了。拥有相同的类并不意味着相同的风格。例如，通过n-child（）或

+

选择器等，可能会产生不同的影响。您能提供更多的代码吗？最好是尽可能最小、可复制的代码。或者是一个链接？让我们知道我们可以做什么。谢谢：）我确实在Bulma样式中看到了这样的：

.hero buttons.button:not（：last child）{margin right:1.5rem；}

-这似乎就是您遇到的或类似的选择器。。。最好在DOM inspector中查看影响元素的所有样式，而不是像屏幕截图中那样在其上悬停。如果我切换顺序，第一个按钮仍然存在问题。顺便问一下，你能看一看我用固定宽度显示的最新图像吗？你正在检查浏览器中的第一个元素，看是否有：first-child（）选择器应用于它吗？很抱歉在我的答案下评论，而不是在线程下。在.buttons的右边有一个边距：0.5em。按钮：not（：last child）：not（.is fullwidth）选择器。我想把它扔掉，它很好。谢谢大家。。解决方案是切换到Bulma的fullwidth类（是fullwidth），而不是使用Tailwind的（w-full）。如果我切换顺序，第一个按钮仍然存在问题。顺便问一下，你能看一看我用固定宽度显示的最新图像吗？你正在检查浏览器中的第一个元素，看是否有：first-child（）选择器应用于它吗？很抱歉在我的答案下评论，而不是在线程下。在.buttons的右边有一个边距：0.5em。按钮：not（：last child）：not（.is fullwidth）选择器。我想把它扔掉，它很好。谢谢大家。。解决方案是切换到Bulma的全宽类（即全宽类），而不是使用Tailwind的（w-full）