如何对齐 HTML 项目符号列表中的第二行

Question

My Second bullet point "WiFi-enabled capabilities across the entire collection" shows up unaligned on Outlook email .我的第二个要点“整个系列中启用 WiFi 的功能”在Outlook email上未对齐。 The second line start with "entire" but it is indented to the right and not aligned exactly under the bullet point.第二行以“整个”开头，但它向右缩进，并且没有与项目符号点完全对齐。 How can I fix this?我怎样才能解决这个问题？

 <tbody> <tr> <td style="width: 12%; padding: 0px;" class="hide_on_mobile">&nbsp;</td> <td style="width: 66.1667%; text-align: center; padding: 0px 10px 15px;" class="adonmobile2"> <ul> <li style="color: #090a0a; margin: 10px; padding: 0px; font-family: Avenir, Arial, san-serif; line-height: 150%; text-align: left;"><span class="font" style="color: #000000; font-size: 18px;">Premium-grade stainless-steel interiors</span></li> <li style="color: #090a0a; margin: 10px; padding: 0px; font-family: Avenir, Arial, san-serif; line-height: 150%; text-align: left;"><span class="font" style="color: #000000; font-size: 18px;">WiFi-enabled capabilities across the entire collection</span></li> <li style="color: #090a0a; margin: 10px; padding: 0px; font-family: Avenir, Arial, san-serif; line-height: 150%; text-align: left;"><span class="font" style="color: #000000; font-size: 18px;">Award-winning theater-style lighting</span></li> <li style="color: #090a0a; margin: 10px; padding: 0px; font-family: Avenir, Arial, san-serif; line-height: 150%; text-align: left;"><span class="font" style="color: #000000; font-size: 18px;">Thermador exclusive Diamond Ice</span></li> <li style="color: #090a0a; margin: 10px; padding: 0px; font-family: Avenir, Arial, san-serif; line-height: 150%; text-align: left;"><span class="font" style="color: #000000; font-size: 18px;">Intuitive Push-to-Open doors</span></li> </ul> </td> <td style="width: 18.8333%; padding: 0px;" class="hide_on_mobile">&nbsp;</td> </tr> </tbody>

Answer 1

4 steps that worked for me:对我有用的 4 个步骤：

Open notepad or textEdit and paste your HTML code打开记事本或文本编辑并粘贴您的 HTML 代码
Save your file as outlook.html (although you can use any name, you MUST use the.html extension)将文件另存为outlook.html （尽管您可以使用任何名称，但必须使用 .html 扩展名）
Open the file in your prefered browser在您喜欢的浏览器中打开文件
copy all the content and paste it in your email复制所有内容并将其粘贴到您的 email

Answer 2

You need to reset the defaults (margins, paddings), and also use 'text-indent' for Outlook, noting that you should only use margin-left on the <li> element.您需要重置默认值（边距、填充），并为 Outlook 使用“text-indent”，注意您应该只在<li>元素上使用 margin-left。 If you want, you can also add top and bottom margins to the <li> (but don't use padding at all - it won't be consistent across email environments).如果需要，您还可以向<li>添加顶部和底部边距（但根本不要使用填充 - 它在 email 环境中不会保持一致）。

<html>
    <head>
        <!--[if gte mso 9]>
<style>
li {
    text-indent:-1em;
}
</style>
<![endif]-->
    </head>
<body>
<table width="400">
<tbody>
<tr>
<td style="width: 12%; padding: 0px;" class="hide_on_mobile">&nbsp;</td>
<td style="width: 66.1667%; text-align: center; padding: 0px 10px 15px;" class="adonmobile2">
<ul  style="margin:0;padding:0;">
<li style="color: #090a0a; margin:0 0 0 30px;padding:0; font-family: Avenir, Arial, san-serif; line-height: 150%; text-align: left;"><span class="font" style="color: #000000; font-size: 18px;">Premium-grade stainless-steel interiors</span></li>
<li style="color: #090a0a; margin:0 0 0 30px;padding:0; font-family: Avenir, Arial, san-serif; line-height: 150%; text-align: left;"><span class="font" style="color: #000000; font-size: 18px;">WiFi-enabled capabilities across the entire collection</span></li>
<li style="color: #090a0a; margin:0 0 0 30px;padding:0; font-family: Avenir, Arial, san-serif; line-height: 150%; text-align: left;"><span class="font" style="color: #000000; font-size: 18px;">Award-winning theater-style lighting</span></li>
<li style="color: #090a0a; margin:0 0 0 30px;padding:0; font-family: Avenir, Arial, san-serif; line-height: 150%; text-align: left;"><span class="font" style="color: #000000; font-size: 18px;">Thermador exclusive Diamond Ice</span></li>
<li style="color: #090a0a; margin:0 0 0 30px;padding:0; font-family: Avenir, Arial, san-serif; line-height: 150%; text-align: left;"><span class="font" style="color: #000000; font-size: 18px;">Intuitive Push-to-Open doors</span></li>
</ul>
</td>
<td style="width: 18.8333%; padding: 0px;" class="hide_on_mobile">&nbsp;</td>
</tr>
</tbody>
</table>
    </body>
</html>

如何对齐 HTML 项目符号列表中的第二行

问题描述

2 个解决方案

解决方案1
0 2021-03-16 18:43:48

解决方案2
0 2021-03-17 05:00:04

如何对齐 HTML 项目符号列表中的第二行

问题描述

2 个解决方案

解决方案1 0 2021-03-16 18:43:48

解决方案2 0 2021-03-17 05:00:04

解决方案1
0 2021-03-16 18:43:48

解决方案2
0 2021-03-17 05:00:04