试图“修复”我在 Squarespace 上的按钮大小

Question

在staterequirement.com的主页上，我有一组按钮，每个状态一个。该网站建立在 Squarespace 之上。

Squarespace 为您提供三种“按钮大小”，每种都有自己的 CSS 属性。但是，它们都根据文本量更改按钮的大小。

将所有按钮放在列中时，它们看起来很不稳定，因为它们的大小都不同，并且会相互碰撞。

我的目标是让这五行按钮在直列中排列在一起，并且所有按钮的大小相同。

我曾想过将所有按钮制作成图像，但这会消除按钮所具有的悬停效果。

.medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium, .large-button-shape-rounded .sqs-block-button .sqs-block-button-element--large { width: 100px}

这是向我建议的，它确实使所有行按钮的大小相同，但它切断了“马萨诸塞州”，并且列的间距不均匀。

我认为答案是提供给我的代码和填充更改的组合。

请帮忙！

附： -- 如果有更好的解决方案，对于这个问题，我绝对愿意听。

Answer 1

以下 CSS 将帮助您实现所需的目标。除了减小填充和字体大小以使所有按钮更紧凑和单行高之外，它还利用了min-width 属性。这使得所有宽度小于 130px 的按钮都被设为 130px 宽，大约是集合中最长按钮的宽度（我相信是南卡罗来纳州）。

.sqs-block-button .sqs-block-button-element--medium {
    padding: 14px 18px;
    font-size: 11px;
    min-width: 130px;
}

正如 Serge Inácio 所提到的，您还有一个问题是您正试图将 Squarespace 的 12 列网格划分为 5 列，但这样做的效果并不相同（它是一个基于列的系统，即使它没有't 感觉喜欢它）。因此，请考虑改用 4 列。使用 4 列，您可以将上述 CSS 中的值向上调整一点。您可能还注意到，在某些宽度下，相邻列中的按钮相互重叠。转到四列也可能对此有所帮助，但如果没有，它至少应该使问题更容易解决。

Answer 2

我看到您在代码中使用了不同的 col 大小：3 x col sqs-col-2 span-2 和 2x col sqs-col-3 span-3 共有 5 列，如果将其减少到 4 列，您将有更多空间（即 4x col sqs-col-3 span-3）并添加建议给您的代码。如果它仍然被切断，您可以将其拆分为 3x col sqs-col-4 span-4 或使字体更小。

希望对我有所帮助:)

问候