html - 表格内的列表元素文本缩进

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的 padding-left的 <ul> ;

只需删除您的填充声明(以及所有改变默认 <ul> 机制的声明)，它就会起作用。

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