我正在使用电子邮件模板设计。我的问题是,如果你看到设计有一个元素与" P" ,上面和下面有垂直的黑线" P",但是问题是这条线没有与其他" P"线。白色背景部分的内容是动态的,所以我无法修复高度。
我的问题是如何克服这个问题。
请帮帮我。在此先感谢。
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<h1 style="background-color:#2C3840; padding:12px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px;margin:0px; font-weight:normal;">September 23</h1>
</td>
</tr>
</tbody>
</table>
<!--time-->
<table width="600" cellspacing="0" cellpadding="0" colspan="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; background-color:#E7EBED;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<table width="600" cellspacing="0" cellpadding="0" border="0" colspan="0" align="left" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<!--row1-->
<tr>
<td align="center" width="20%" style="color:#000; font-family:Arial, Helvetica, sans-serif; text-align:left; padding:25px 10px;">
<p style="color:#666;margin:0px;padding-left: 20px;">08:00</p>
</td>
<td width="10%">
<span style="width:3px; background-color:#2C3840; margin-left: 18px; margin-top: -48px;"> </span>
<p style="background-color:#EF7247;width:35px;margin:0px; height:35px; line-height: 35px;text-align: center;border:3px solid #2C3840; border-radius:50%;">P</p>
<span style="width:3px; background-color:#2C3840; margin-left: 18px; margin-top: -48px;"> </span>
</td>
<td align="center" width="60%" style="color:#000; font-family:Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; text-align:left;">
<table cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 4%;">
<tbody>
<tr>
<td><img src="http://alialamshahi.com/themes/eventify/images/tri_left.png"></td>
<td><h4 style="background-color:#fff;border-radius:10px; padding:15px; color:#2C3840;margin:0px;"> Pre-Party <strong style="color:#999;">Sponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere Labs</strong> </h4></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--row1-->
<tr>
<td align="center" width="20%" style="color:#000; font-family:Arial, Helvetica, sans-serif; text-align:left; padding:25px 10px;">
<p style="color:#666;margin:0px;padding-left: 20px;">08:00</p>
</td>
<td width="10%">
<span style="width:3px; background-color:#2C3840; margin-left: 18px; margin-top: -48px;"> </span>
<p style="background-color:#EF7247;width:35px;margin:0px; height:35px; line-height: 35px;text-align: center;border:3px solid #2C3840; border-radius:50%;">P</p>
<span style="width:3px; background-color:#2C3840; margin-left: 18px; margin-top: -48px;"> </span>
</td>
<td align="center" width="60%" style="color:#000; font-family:Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; text-align:left;">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td><img src="http://alialamshahi.com/themes/eventify/images/tri_left.png"></td>
<td><h4 style="background-color:#fff;border-radius:10px; padding:15px; color:#2C3840;margin:0px;"> Pre-Party <strong style="color:#999;">Sponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere Labs</strong> </h4></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--time-->
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<h1 style="background-color:#2C3840; padding:12px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px;margin:0px; margin-bottom:2px; font-weight:normal;">September 24</h1>
</td>
</tr>
</tbody>
</table>
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<h1 style="background-color:#2C3840; padding:12px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px;margin:0px; font-weight:normal;">September 25</h1>
</td>
</tr>
</tbody>
</table>
答案 0 :(得分:0)
设置属性以设置顶部和底部边框的样式。你可以使用下面的风格...希望它是你想要的。
.className {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
答案 1 :(得分:0)