Mailchimp日程模板列表CSS在Gmail中失效，求兼容解决方案

我正在为无编码经验的用户设计Mailchimp日程模板，要求在<style>标签中应用通用CSS，同时保留<ul>/<li>的HTML列表格式，方便用户在文本编辑器中编辑内容。我希望每个<li>项带有底部边框，且列表项间有合适的内边距。当前代码在Mail应用中基本正常，但Gmail会忽略所有基础<li>样式。我尝试为<ul>使用flex布局，Gmail同样忽略flex-direction属性。想问是否有技巧能让列表在Gmail中呈现预期效果，还是邮件CSS实现此需求过于复杂？

当前使用的CSS代码：

ul li{ 
 border-bottom: 1px solid black;
}

ul li {
 margin-bottom: 8px !important;
 padding-bottom: 7px !important;
}

1. 启用Mailchimp自动内联CSS功能 #

Gmail会过滤<style>标签中大部分针对列表元素的样式规则，直接内联样式是最可靠的兼容方式。Mailchimp自带「自动内联CSS」功能，开启后它会自动把你在<style>中写的样式转换为内联到每个<li>元素上，用户编辑时只需修改内容，看不到复杂的内联代码，完全不影响编辑体验。

2. 用表格模拟列表（终极兼容方案） #

如果内联样式仍有问题，可改用表格模拟列表结构——Gmail对表格样式的支持几乎完美。创建一个1列的表格，每行对应一个列表项，给<td>标签添加底部边框和内边距样式。你可以在Mailchimp中将这个表格封装为可编辑模块，用户只需修改每行内容，无需触碰表格结构。

示例表格结构：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="border-bottom:1px solid black; padding-bottom:7px; margin-bottom:8px; display:block;">列表项1</td>
  </tr>
  <tr>
    <td style="border-bottom:1px solid black; padding-bottom:7px; margin-bottom:8px; display:block;">列表项2</td>
  </tr>
</table>

3. 放弃flex布局，回归基础 #

Gmail对flex布局的支持极差，尤其是旧版本客户端，完全不要依赖flex来实现列表布局，改用块级元素或表格布局即可。

4. 简化CSS选择器 #

Gmail对复杂CSS选择器支持有限，尽量使用最基础的选择器，比如直接写li而非ul li，配合内联样式使用能提升兼容性。

内容的提问来源于stack exchange，提问作者ZACK F.