MailChimp 提交按钮 CSS

Posted 2023-03-24

【中文标题】MailChimp 提交按钮 CSS

【英文标题】：MailChimp Submit Button CSS

【发布时间】：2018-06-19 15:40:10

【问题描述】：

社区，

我对 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>

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

谢谢！

【问题讨论】：

尝试删除line-height,height,padding of #mc_embed_signup .button /classic-10_7.css:7

删除高度，否则您的填充会使其对于高度而言太大。 PS，因为你知道如何检查元素，你应该在你的窗口中使用样式 - 尝试勾选取消样式以查看它如何影响按钮

谢谢X先生和@Pete。如果我没有添加它们，如何删除行高和高度？我试过这个： height: none !important;行高：无！重要； （是的，又是重要的，但它没有显示......）不幸的是，这并没有解决我的问题。

试试height：自动和line-height：正常

【参考方案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;

【讨论】：

感谢您的快速答复！我使用了重要的关键字，否则更改是不可见的。现在，我完全移除了 padding-bottom，按钮仍然“薄”（因为没有更好的词）。

我想我在网站上看不到 padding-bottom !important for #mc_embed_signup .button 了，你删除了吗？

嗨@orabis，谢谢！我不得不使用 !important 但现在设置 padding-top 和 padding-bottom 有效。我不确定我是否得到与其他按钮完全相同的尺寸，但至少看起来是这样的。我将不得不更仔细地研究所有这些事情，因为我总是被这些问题困扰好几个小时！感谢其他所有回答如此迅速的人，我应该早点问这个问题，这会为我节省很多时间。 :))

【参考方案2】：

用这个更新添加 css：

#mc_embed_signup .button 
    height: 45px !important;