проблема с выравниванием ul html

#css #html-table #html-email

#css #html-таблица #html-email #html-электронная почта

Вопрос:

Я создал список в электронном письме в формате 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>

Однако список не выровнен с заголовком выше. Как мне их выровнять?

1. Хорошо, почему за это было отдано пять голосов?

2. ну, встроенные стили — это не совсем лучшая практика для одного… но я понимаю, что это шаблон электронной почты, где они могут вам понадобиться…

3. итак, ваша точка зрения такова? Электронные письма на HTML не допускают css в заголовке

4. Я не отрицал это, и я упомянул это в своем комментарии, и я исправил вашу разметку с плохими вкладками.

5. Также смотрите мой обновленный <html> код. Исправлено множество возникавших у вас проблем, удалено много ненужного кода. Я даже использовал несколько примеров маркеров, вам просто нужно заменить их своими.

Ответ №1:

Добавьте padding:0 в свой стиль CSS для вашего 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;">

Ответ №2:

Смотрите мою обновленную скрипку http://jsfiddle.net/KM9Wk/1 /.

Я обновил ваш <html> код. Не уверен, почему у вас были пустые <td> теги по бокам. Я просто использовал padding вместо этого. «Заголовок» также выровнен правильно.

1. Это не решает мою проблему, маркированные точки исчезли, и они все еще не выровнены

2. Маркеры не будут отображаться, потому что этих изображений нет на сервере JSFiddle …