Search code examples
csshtml-tablehtml-email

ul alignment issue html

I have created a list in an html email as:

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

However the list is not aligned with the Title above. How do I align them ?

Solution

  • Add padding:0 to your CSS style for your UL and optionally list-style-position:inside; if you want the bullets included within the text rather than outside (to the left).

    <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;">