Question

我在为我工作的公司创建电子邮件时遇到了困难。似乎有些东西是错位的。我不知道如何解决这个问题。有什么帮助吗？

HTML（为便于阅读而裁剪）

 <body>
   <table align="center" class="container">
     <tbody>
       <tr>
         <td>
           <table class="row">
             <tbody>
               <tr>
                 <th class="large-6 small-12 columns">         <-- OVERFLOWS
                   <table>
                       <tr>
                         <th>
                           <h5 class="text-center lead">Lieferadresse</h5>
                           <p class="text-center sub">Fredrick Müller</p>
                           <p class="text-center sub">Apfelstraße 12</p>
                           <p class="text-center sub">95468 Weiden</p>
                           <p class="text-center sub">Germany</p>
                         </th>
                       </tr>
                     </table>
                   </th>
                 </tr>
               </tbody>
             </table>
           </td>
         </tr>
       </tbody>
     </table>
   </body>

问题说明

当屏幕缩小到small断点时，似乎不会删除large断点样式。我相信这会导致问题，但不知道如何修复它。

我在代码中指出的th标记溢出了表格，导致整个文档无法响应。

在我的实际代码中，此处未显示，我有两个th标记，分别包含类first和last。这些类似乎使情况变得更糟，但在large断点处，一切都已对齐。

如果有人想要复制问题，这里是CDN：

<!-- Foundation for Emails -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation-emails/2.2.1/foundation-emails.css" />

以下是Google DevTools的问题。正如您所看到的，大型样式仍在影响元素。导致异常padding和错位。

修改

这是一个展示问题的图片。

谢谢，

拉斯

Answer 1

你可以做的是，给<th class="large-6 small-12 columns" style="padding-left: 8px;">，然后他们都将在中心。

代码段：

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation-emails/2.2.1/foundation-emails.css" />
 
 <body>
   <table align="center" class="container">
     <tbody>
       <tr>
         <td>
           <table class="row">
             <tbody>
               <tr>
                 <th class="large-6 small-12 columns first" style="padding-left: 8px;">         
                   <table>
                       <tr>
                         <th>
                           <h5 class="text-center lead">Rechnungsadresse</h5>
                           <p class="text-center sub">Fredrick Müller</p>
                           <p class="text-center sub">Apfelstraße 12</p>
                           <p class="text-center sub">95468 Weiden</p>
                           <p class="text-center sub">Germany</p>
                         </th>
                       </tr>
                     </table>
                   </th>
                   <th class="large-6 small-12 columns last">         
                   <table>
                       <tr>
                         <th>
                           <h5 class="text-center lead">Lieferadresse</h5>
                           <p class="text-center sub">Fredrick Müller</p>
                           <p class="text-center sub">Apfelstraße 12</p>
                           <p class="text-center sub">95468 Weiden</p>
                           <p class="text-center sub">Germany</p>
                         </th>
                       </tr>
                     </table>
                   </th>
                 </tr>
               </tbody>
             </table>
           </td>
         </tr>
       </tbody>
     </table>
   </body>

电子邮件的基础 - 列和行在小的情况下是不对齐的？

1 个答案: