Sendgrid设计编辑器无法修改按钮模块宽度的技术求助

方案1：全局注入CSS强制box-sizing与宽度继承 #

在Sendgrid邮件模板的全局CSS区域添加以下代码，覆盖按钮模块的默认样式：

.inner-td a {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

注：!important用来强制覆盖模块自动生成的内联固定宽度样式，确保按钮自适应容器宽度。

方案2：调整列与按钮模块的内置参数 #

• 将列模块的**内边距（Padding）设为0，同时把列之间的间距（Gutter）**调至合理数值（如10px），避免容器空间不足引发溢出。
• 在按钮模块设置中，不直接设置宽度为100%，而是适当减小按钮的内边距（Padding），并启用模块自带的“填充容器”选项（若存在），让按钮自适应列宽。

方案3：利用模块的自定义样式字段 #

多数Sendgrid模块支持添加自定义内联样式，在按钮模块的高级设置里，找到“自定义CSS”或“附加样式”输入框，添加：

box-sizing: border-box; width: 100%;

部分Sendgrid版本会优先加载此处追加的样式，覆盖自动生成的固定宽度值。

方案4：用calc()修正宽度适配 #

如果上述方法无效，先在按钮模块中设置一个接近容器宽度的固定值，再通过全局CSS的calc()修正：

.inner-td a {
  box-sizing: border-box !important;
  width: calc(100% - 2px) !important; /* 减去按钮边框的总宽度 */
}

内容的提问来源于stack exchange，提问作者Toru Kawahata