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

在staterequirement.com的主页上我有一组按钮，每个状态一个。该网站建立在Squarespace上。试图“修复”我的按钮的大小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}

这已经建议我，它使所有行按钮的大小相同，但它切断“马萨诸塞州”，而列不均匀分布的。

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

请帮忙！

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

来源

2017-03-06 Ethan Peyton

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

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

正如塞尔日·伊纳西奥提到的，你必须在另外一个问题你试图Squarespace的12列格分为5列，它会不会同样做（这是基于列的系统，即使它没有也觉得喜欢它）。因此，请考虑使用4列。通过4列，您可以稍微调整上面CSS中的值。您还可能注意到，在某些宽度上，相邻列中的按钮会彼此重叠。去四列也可以帮助这个，但如果不这样做，至少应该让问题更容易解决。

来源

2017-03-06 16:23:58 Brandon

谢谢你的代码！这已经解决了这个问题。另外，我感谢你让我知道有12列的网格。我需要克服50分这么好的事实，并把它放到4列网格中。我真的很感谢你的帮助！ –

我看你用diferent山坳尺寸在你的代码：3×col sqs-col-2 span-2和2x col sqs-col-3 span-3具有总共5列的，如果你把它降低到4列，你将有更多的空间（即4倍col sqs-col-3 span-3），并添加代码被建议给你。如果它仍然中断，你可能会分裂成3x col sqs-col-4 span-4或使字体略小。

希望我帮一点:)

问候

来源

2017-03-06 16:08:01

谢谢你的回应！列的工作方式实际上并不是“列”。更像是，我将它们拖放到彼此的旁边，并且它们会自动在页面上均匀分布。所以每一行实际上都是自己的列设置。我可以将整个“表”分成4列，这样可以解决磨合问题，但按钮的大小依然不同。您是否认为有一种方法可以减少按钮本身内的文本的填充大小，如果该词很大？恩。马萨诸塞州。我真的很感谢你的帮助:) –

是的，还是3列。之后，你可以添加以下内容到你的CSS：'.sqs-block-button-element - medium {width：90％！important;}'如果你喜欢，你可以添加百分比或像素，这取决于你。 –

谢谢你的帮助！我会把宽度：90％作为评论，因为我现在不会使用它，但它可能很快就会派上用场！ –

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

回答

相关问题