Question

我在html电子邮件中创建了一个列表：

<table width="220" border="1" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
  <tr>
    <td width="20"></td>
    <td width="180">
      <p style="color:#333333; line-height: 20px; font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-align: left; padding-top: 10px;">Title</p>
      <ul style="color:#767676; line-height: 20px; font-size: 12px; font-family: Helvetica, Arial, sans-serif; list-style-image:url(images/bullet.jpg);">
        <li>Contrary to popular belief, Lorem Ipsum is not simply random text. </li>
        <li>Contrary to popular belief, Lorem Ipsum is not simply random text. </li>
        <li>Contrary to popular belief, Lorem Ipsum is not simply random text. </li>
      </ul>
    </td>
    <td width="20"></td>
  </tr>
</table>

但是列表与上面的标题不一致。如何对齐它们？

Answer 1

查看我更新的小提琴 http://jsfiddle.net/KM9Wk/1/。

我更新了您的<html>代码。不确定为什么你的侧面有空<td>标签。我刚用padding代替。 “标题”也正确对齐。

Answer 2

如果您希望项目符号包含在文本内而不是外部（左侧），请为您的padding:0和UL添加list-style-position:inside;。

<ul style="color:#767676; line-height: 20px; font-size: 12px; font-family: Arial, sans-serif; list-style-image:url(images/bullet.jpg);list-style-position:inside;padding:0;">

ul alignment问题html

2 个答案: