尝试 "fix" 我在 Squarespace 上的按钮大小

Question

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

Squarespace 为您提供三个 "button sizes,"，每个都有自己的 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}

有人向我建议，它确实使所有行按钮的大小相同，但它切断了 "Massachusetts"，并且列的间距不均匀。

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

请帮忙！

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

Answer 1

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

希望我有所帮助:)

此致

Answer 2

以下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 列，但它不会均分（它是一个基于列的系统，即使感觉不喜欢）。因此，请考虑改用 4 列。对于 4 列，您可以稍微向上调整上面 CSS 中的值。您可能还会注意到，在某些宽度下，相邻列中的按钮彼此重叠。转到四列可能也有帮助，但如果没有，它至少应该使问题更容易解决。

尝试 "fix" 我在 Squarespace 上的按钮大小

Trying to "fix" the size of my buttons on Squarespace

css

squarespace