Email HTML TopNav Меню в структуре таблицы - PullRequest
Новая
       19

Email HTML TopNav Меню в структуре таблицы

0 голосов
/ 05 марта 2020

Я унаследовал этот код для использования в электронном письме и был бы признателен за советы по исправлению. Код представляет собой таблицу, которая создает topnav / меню с lo go, за которым следуют 1-3 ссылки «меню» для перехода пользователя на веб-сайт.

CURRENT: одиночная строка таблицы, каждый элемент которой отделен неразрывными пробелами.

ВЫПУСК: выровнен по левому краю, поэтому пункты меню в различных адаптивных версиях всплывают.

СПРОСИТЕ: Я думаю, что если строка установлена ​​в 4-5 столбцов, это позволит левой ячейке быть "lo go", пустая ячейка и 3 ячейки для каждого из элементов навигации. Он использует некоторый дополнительный код, который, я думаю, нацелен на исправление, необходимое для Outlook, но я не знаком с ним и не уверен, что предложенное решение сломает его. 

<table width="100%" role="presentation" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td class="pc-sm-p-25-20 pc-xs-p-15-10" valign="middle" style="padding: 29px 30px; background-color: #ffffff; font-size: 0" bgcolor="#ffffff"><!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td valign="middle"><![endif]-->

                <div style="display: inline-block; vertical-align: middle;">
                    <table role="presentation" border="0" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr>
                                <td valign="top" style="padding: 10px;"><a style="text-decoration: none;" href="http://https://www.website.com"><img width="130" height="" style="max-width: 100%; height: auto; border: 0; line-height: 100%; outline: 0; -ms-interpolation-mode: bicubic; font-size: 14px; color: #1B1B1B;" alt="" src="images/fpo-logo-1180x239.jpg"></a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!--[if (gte mso 9)|(IE)]></td><td valign="middle"><![endif]-->

                <div style="display: inline-block; vertical-align: middle;">
                    <table role="presentation" border="0" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr>
                                <td valign="top" style="padding: 10px; line-height: 18px; font-family: Helvetica, sans-serif; font-size: 14px;"><a style="text-decoration: none; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; color: #454545" href="https://www.website.com/path1">Path 1</a> <span style="font-family: Helvetica, sans-serif; font-size: 20px;">&nbsp;&nbsp;</span> <a style="text-decoration: none; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; color: #454545" href="https://www.website.com/ath2">Path 2</a> <span style="font-family: Helvetica, sans-serif; font-size: 20px;">&nbsp;&nbsp;</span> <a style="text-decoration: none; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; color: #454545" href="https://www.website.com/path3">Path 3</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
        </tr>
    </tbody>
</table>
...