MailChimp 提交按钮 CSS

Question

社区，

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

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

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

这是我在自定义 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 中使用了重要的关键字。 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。您可以 git 去掉我强烈推荐的重要关键字，也可以将重要关键字与其他 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;
}

Answer 2

用这个更新添加 css：

#mc_embed_signup .button {
    height: 45px !important;
}