当一行中的文本较少时无法对齐文本行
Unable to align rows of text when one row has less text in it
我正在写 HTML 一封电子邮件，电子邮件的一部分目前看起来像这样。问题是最后一行的对齐方式很奇怪。奇怪的是，我发现的唯一解决方案似乎是在最后一行添加更多文本。但我不喜欢这个解决方案。
这是在 Chrome 中用于创建上述输出的确切代码。
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="border: 1px solid #DDDDDD;background-color: #FFFFFF;" width="600">
<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 35px; padding-bottom: 0px;">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif;">
<span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
<span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">imperdiet</span>
– Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta, lacus dictum ornare elementum, magna eros cursus lectus, sed ullamcorper mi diam vehicula augue.
</span>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 10px; padding-bottom: 0px;">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif;">
<span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
<span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">Phasellus</span>
– Vestibulum cursus elit vel urna lacinia feugiat. Maecenas vel varius eros. Maecenas vel mattis sem. Proin ac mauris quis elit suscipit tristique eu eu risus
</span>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 10px; padding-bottom: 0px;">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif;">
<span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
<span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">dictum</span>
– Ut commodo tincidunt dictum. In hendrerit
</span>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
请注意，这不是正常的 HTML，而是 HTML 专门用于电子邮件（因此丑陋）
如果您将第一级 <td> 元素设置为 display: block;，它可以解决您的问题。
为 table 单元格添加设置宽度。这将解决您的问题！
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="border: 1px solid #DDDDDD;background-color: #FFFFFF;" width="600">
<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 35px; padding-bottom: 0px; width: 800px">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif; width: 800px">
<span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
<span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">imperdiet</span>
– Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta, lacus dictum ornare elementum, magna eros cursus lectus, sed ullamcorper mi diam vehicula augue.
</span>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 10px; padding-bottom: 0px; width: 800px">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif; width: 800px">
<span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
<span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">Phasellus</span>
– Vestibulum cursus elit vel urna lacinia feugiat. Maecenas vel varius eros. Maecenas vel mattis sem. Proin ac mauris quis elit suscipit tristique eu eu risus
</span>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 10px; padding-bottom: 0px; width: 800px">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif; width: 800px">
<span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
<span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">dictum</span>
– Ut commodo tincidunt dictum. In hendrerit
</span>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
解决此问题的另一种方法是将 "padding-left: 18%" 插入 table 行 "tr" 标记中。由于更改填充对数据 "td" 标记不起作用，接下来要尝试的是移动整行。因此，格言部分的修订代码如下所示。
<tr style="padding-left: 18%; color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style=" padding-right: 18%; padding-top: 10px; padding-bottom: 0px;">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif;">
<span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
<span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">dictum</span>
– Ut commodo tincidunt dictum. In hendrerit.
</span>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
我正在写 HTML 一封电子邮件，电子邮件的一部分目前看起来像这样。问题是最后一行的对齐方式很奇怪。奇怪的是，我发现的唯一解决方案似乎是在最后一行添加更多文本。但我不喜欢这个解决方案。
这是在 Chrome 中用于创建上述输出的确切代码。
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="border: 1px solid #DDDDDD;background-color: #FFFFFF;" width="600">
<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 35px; padding-bottom: 0px;">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif;">
<span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
<span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">imperdiet</span>
– Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta, lacus dictum ornare elementum, magna eros cursus lectus, sed ullamcorper mi diam vehicula augue.
</span>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 10px; padding-bottom: 0px;">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif;">
<span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
<span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">Phasellus</span>
– Vestibulum cursus elit vel urna lacinia feugiat. Maecenas vel varius eros. Maecenas vel mattis sem. Proin ac mauris quis elit suscipit tristique eu eu risus
</span>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 10px; padding-bottom: 0px;">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif;">
<span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
<span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">dictum</span>
– Ut commodo tincidunt dictum. In hendrerit
</span>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
请注意，这不是正常的 HTML，而是 HTML 专门用于电子邮件（因此丑陋）
如果您将第一级 <td> 元素设置为 display: block;，它可以解决您的问题。
为 table 单元格添加设置宽度。这将解决您的问题！
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="border: 1px solid #DDDDDD;background-color: #FFFFFF;" width="600">
<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 35px; padding-bottom: 0px; width: 800px">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif; width: 800px">
<span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
<span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">imperdiet</span>
– Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta, lacus dictum ornare elementum, magna eros cursus lectus, sed ullamcorper mi diam vehicula augue.
</span>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 10px; padding-bottom: 0px; width: 800px">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif; width: 800px">
<span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
<span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">Phasellus</span>
– Vestibulum cursus elit vel urna lacinia feugiat. Maecenas vel varius eros. Maecenas vel mattis sem. Proin ac mauris quis elit suscipit tristique eu eu risus
</span>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 10px; padding-bottom: 0px; width: 800px">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif; width: 800px">
<span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
<span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">dictum</span>
– Ut commodo tincidunt dictum. In hendrerit
</span>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
解决此问题的另一种方法是将 "padding-left: 18%" 插入 table 行 "tr" 标记中。由于更改填充对数据 "td" 标记不起作用，接下来要尝试的是移动整行。因此，格言部分的修订代码如下所示。
<tr style="padding-left: 18%; color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style=" padding-right: 18%; padding-top: 10px; padding-bottom: 0px;">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif;">
<span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
<span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">dictum</span>
– Ut commodo tincidunt dictum. In hendrerit.
</span>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>