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

Posted 2023-03-07

【中文标题】为啥这些具有完全相同类别的按钮宽度不同？

【英文标题】：Why are these buttons with exactly the same classes different widths?为什么这些具有完全相同类别的按钮宽度不同？

【发布时间】：2020-03-10 23:18:49

【问题描述】：

我有两个按钮。

它们具有完全相同的类。

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

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

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

这里会发生什么？

更新：

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

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

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

更新 2

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

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

【问题讨论】：

父容器是弹性的吗？

根据你的截图，Claim 按钮有一些边框。尝试寻找给子 w.r.t 父容器的任何边框。另外，能不能再做个简单的demo就好了？

拥有相同的类并不意味着相同的风格。例如，一个人可能会受到 nth-child() 或 + 选择器等的不同影响

您能提供更多代码吗？最好是尽可能少的、可重现的代码。或者也许还有一个链接？这样我们就知道我们可以做什么。谢谢:)

我确实在 Bulma 中看到了这样的样式：.hero-buttons .button:not(:last-child) margin-right: 1.5rem; - 这似乎是您遇到的问题或类似的选择器...最好在 DOM 检查器中查看所有样式影响元素，而不仅仅是像屏幕截图中那样将鼠标悬停在它上面。

【参考方案1】：

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

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

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

【参考方案2】：

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

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

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

【讨论】：

如果我切换顺序，第一个按钮仍然有问题。顺便问一下，你能看看我展示的最新的固定宽度图片吗？

您是否正在检查浏览器中的第一个元素以查看是否应用了 :first-child() 选择器？

很抱歉在我的回答而不是线程下发表评论。 .buttons .button:not(:last-child):not(.is-fullwidth) 选择器有一个 margin-right:0.5em。改写去掉就好了。

谢谢大家.. 解决方案是切换到 Bulma 的全宽类 (is-fullwidth) 而不是使用 Tailwind 的 (w-full)