Question

所以我现在在网上看了一段时间并且还没有找到解决方案，我有一个我正在创建的电子邮件表，我在表格中有列表元素。我要做的是让文本缩进对齐而不是在项目符号下面有文本，例如：

没有

•文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

是

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

据我所知，如果你只是添加：list-style-position：outside;到了css但是因为它在表中它需要是list-style-position：inside;或者列表出现在表格之外。

到目前为止我的代码：

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="3" bgcolor="#FFFFFF">
  <tr>
    <td width="50%" height="30px" align="center" valign="middle" bgcolor="#2A7AD2"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #ffffff"><strong>Xxxxxxxxxxxxxxxx</strong></span></td>
    <td width="50%" align="center" valign="middle" bgcolor="#2A7AD2"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #ffffff;"><strong>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</strong></span></td>
  </tr>
  <tr>
    <td width="50%" height="30px" align="left" valign="middle" colspan="2"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #666666;">
      <ul style="list-style-image: url('http://www.email.co.uk/vd2/files/hr/en/std/emails/owner_news/whiteglove/green-tick.png'); margin-left: 0; list-style-position:inside; padding-left: 5px;">
        <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
      </ul>
      </span></td>
  </tr>
  <tr>
    <td width="50%" align="left" valign="top"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #666666;">
      <ul style="list-style-image: url('http://www.email.co.uk/vd2/files/hr/en/std/emails/owner_news/whiteglove/green-tick.png'); margin-left: 0; list-style-position:inside; padding-left: 5px; text-indent: -5px; list-style-type: decimal;">
        <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
      </ul>
      </span></td>
    <td width="50%" align="left" valign="top"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #666666;">
      <ul style="list-style-image: url('http://www.email..co.uk/vd2/files/hr/en/std/emails/owner_news/whiteglove/green-tick.png'); margin-left: 0; list-style-position:inside; padding-left: 5px; text-indent: -5px; list-style-type: decimal;">
        <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
      </ul>
      </span></td>
  </tr>
  <tr>
    <td width="50%" align="left" valign="top"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #666666;">
      <ul style="list-style-image: url('http://www.email.co.uk/vd2/files/hr/en/std/emails/owner_news/whiteglove/green-tick.png'); margin-left: 0; list-style-position:inside; padding-left: 5px; text-indent: -5px; list-style-type: decimal;">
        <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
      </ul>
      </span></td>
    <td width="50%" align="left" valign="top"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #666666;">
      <ul style="list-style-image: url('http://www.email.co.uk/vd2/files/hr/en/std/emails/owner_news/whiteglove/green-tick.png'); margin-left: 0; list-style-position:inside; padding-left: 5px; text-indent: -5px; list-style-type: decimal;">
        <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
      </ul>
      </span></td>
  </tr>
  <tr>
    <td width="50%" height="30px" align="left" valign="middle" colspan="2"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #666666;">
      <ul style="list-style-image: url('http://www.email.co.uk/vd2/files/hr/en/std/emails/owner_news/whiteglove/green-tick.png'); margin-left: 0; list-style-position:inside; padding-left: 5px;">
        <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
      </ul>
      </span></td>
  </tr>
</table>

请理解，因为这是一封电子邮件，我明显在标签中添加了css。

Answer 1

问题是您覆盖了40px的{{1}}的默认 padding-left;

只需删除你的填充声明（以及改变默认<ul>机制的所有声明），它就可以了。

P.S：尽量避免内联样式

列表中的元素文本缩进

1 个答案: