ul对齐问题html答案

【问题标题】：ul alignment issue htmlul对齐问题html
【发布时间】：2011-08-28 06:04:37
【问题描述】：

我在 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>

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

【问题讨论】：

好的，为什么要投 -ve 票？
好吧，内联样式并不是一个人的最佳实践...但我知道这是一个您可能需要它们的电子邮件模板...
所以你的意思是？ HTML 电子邮件不允许在标题中使用 css
我没有对此投反对票，我在评论中提到了这一点，并修复了你的标签式标记不佳。
另外，请参阅我更新的<html> 代码。修复了很多问题，删除了很多不必要的代码。我什至使用了一些示例项目符号，您只需将它们替换为您自己的。

标签： css html-table html-email

【解决方案1】：

将padding:0 添加到您的UL 的CSS 样式中，如果您希望项目符号包含在文本中而不是外部（左侧），则可以选择添加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;">

【讨论】：

【解决方案2】：

查看我更新的 fiddle http://jsfiddle.net/KM9Wk/1/。

我更新了您的<html> 代码。不知道为什么侧面有空的<td> 标签。我只是改用padding。 “标题”也正确对齐。

【讨论】：

这并没有解决我的问题，项目符号已经消失，仍然没有对齐
项目符号不会显示，因为这些图像不在 JSFiddle 服务器上...