Question

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

Squarespace为您提供三种＆＃34;按钮尺寸，＆＃34;每个都有自己的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}

这已经向我建议了，它确实使所有行按钮的大小相同，但它会切断＆＃34; Massachusetts＆＃34;，并且列的间隔不均匀。

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

请帮忙！

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

Answer 1

我发现您在代码中使用了不同的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或者将字体缩小一点。

希望我有所帮助：）

此致

Answer 2

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

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

正如SergeInácio所提到的，你还有另一个问题，那就是你试图将Squarespace的12列网格划分为5列，它们不会做同样的事情（它是一个基于列的系统，即使它没有'感觉喜欢它。因此，请考虑使用4列。使用4列，您可以稍微向上调整上述CSS中的值。您可能还注意到，在某些宽度处，相邻列中的按钮彼此重叠。转到四列可能也有帮助，但如果没有，它至少应该使问题更容易解决。

试图修复＆＃34; Squarespace上按钮的大小

2 个答案: