html - MailChimp 提交按钮 CSS

Question

社区，

我对 MailChimp 的“提交”按钮的 CSS 样式有疑问。到目前为止，我设法使用 CSS 更改按钮的颜色和字体。

我想更改“提交”按钮的填充和边距，但在尝试不同的“边距/填充”组合并在 Google Chrome 的 DevTools 中进行试验后，我找不到解决方案:按钮似乎被切断了如果我增加填充。

屏幕截图 1 是现在的样子，屏幕截图 2 是如果我将顶部/底部填充从 0 增加到 20 像素时会发生的情况。

这是我在 Custom-CSS 中用来更改字体、颜色等的内容:

    #mc_embed_signup .button {
    background-color: #d1e5e6  !important;
    color: #000000 !important;
    border-radius: 0 !important;
    border: none !important;
    font: 16px, bebas_neue, Helvetica,Arial,sans-serif !important;
    font-weight: bold !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-bottom: 13px !important;
    }

这是提交按钮的 HTML:

    <div style="text-align: center !important;"><input type="submit" value="Abonnieren" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

我希望有人能帮助我解决这个奇怪的问题。我希望所有按钮的大小相同(为了一致性)，但我已经在努力更改帖子网格的“阅读更多”按钮。希望我至少可以调整提交按钮，这样它看起来就不会太奇怪了。这个太瘦了。

谢谢!

Answer 1

您在 #mc_embed_signup .button 中使用 important 关键字。 padding-bottom 就是其中之一

#mc_embed_signup .button {
    font-weight: bold !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-bottom: 13px !important;
}

这就是为什么当您设置 padding-top 和 padding-bottom 时文本会被截断。简单地说，没有应用 padding-bottom。您可以删除 important 关键字(我强烈建议这样做)，或者将 important 关键字与附加的 specificity 一起使用。规则。

编辑

删除重要关键字后，您可以按如下方式设置按钮的高度

#mc_embed_signup .button {
 height: 30px;
}

尝试尝试是否需要 !important 关键字。尽量避免

还可以使用padding-top和-bottom；例如如下。确保使用自动高度。否则，您将需要为填充设置不均匀的值；即顶部为 20，底部为 40

#mc_embed_signup .button {
   padding-top: 17px;
   padding-bottom: 17px;
   height: auto;
}