HTML跨度不起作用

Question

这就是我想要实现的目标：

但是，我没有设法使用span执行此操作，而我不知道如何使用任何其他html标记执行此操作..这是我当前的html：

<tr>
  <td>
    <table style="margin-top: 15px;" width="550px" cellspacing="0" cellpadding="0" align="center">
      <tbody>
        <tr>
          <td style="text-align: left;">
            <p style="padding: 23px; font-size: 16px; color: black; font-weight: bold;">Sold by: The Vendor <span>address</span></p>
          </td>
          <td style="text-align: right;">
            <p style="padding: 23px; font-size: 16px; color: black; font-weight: bold;">Invoiced to: The Customer <span>address</span></p>
          </td>
        </tr>
      </tbody>
    </table>
  </td>
</tr>

Answer 1

首先，您似乎需要4列，而不是2.其次，使用vertical-align: top;确保它们不在中间，并且相邻单元格中的第一行正确对齐;并删除垂直填充或将其设置为每列;并且用p替换span标签或确保填充是一致的。最后，您需要<br>添加换行符。

这是一个近似的例子（尽管如此，我还没有包含2个新单元格和span内容设置不同的字体大小和字体颜色，你可以添加youself）：

＆＃13;

＆＃13;

<table style="margin-top: 15px;" width="550px" cellspacing="0" cellpadding="0" align="center">
  <tbody>
    <tr>
      <td style="text-align: right; vertical-align: top; padding-right: 5px;">
        <span style="font-size: 16px; color: black; font-weight: bold;">Sold by:</span>
      </td>
      <td style="text-align: left; vertical-align: top;">
        The Vendor<br>address<br>...
      </td>
      <td style="text-align: right; vertical-align: top; padding-right: 5px;">
        <span style="font-size: 16px; color: black; font-weight: bold;">Invoiced to:</span>
      </td>
      <td style="text-align: left; vertical-align: top;">
        The Customer<br>address<br>...
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

PS您可以使用inline-block元素实现2列（注意vertical-align应用于单元格和内部跨度，第二个用于防止内部元素与顶部对齐按文字基线;或者您可以尝试使用vertical-align: text-top for the div代替top代替span：

＆＃13;

＆＃13;

<table style="margin-top: 15px;" width="550px" cellspacing="0" cellpadding="0" align="center">
  <tbody>
    <tr>
      <td style="vertical-align: top; font-size: 16px; color: black;">
        <span style="vertical-align: top; font-weight: bold;">Sold by:</span>
        <div style="display: inline-block; padding-left: 5px;">The Vendor<br>address<br>...</div>
      </td>
      <td style="vertical-align: top; font-size: 16px; color: black;">
        <span style="vertical-align: top; font-weight: bold;">Invoiced to:</span>
        <div style="display: inline-block; padding-left: 5px;">The Customer<br>address<br>...</div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

但是，这可能更难以对齐，特别是你可能会遇到宽度很小的屏幕问题。

Answer 2

这是电子邮件还是网页？

无论哪种方式，你都希望将每一列分成它自己的TD。给每个TD一个宽度，表中所有TD的宽度应该加到你的表宽（550px）。

您可以尝试这样的事情，只需根据需要调整间距

<td style="text-align: left;" width="112">
  <p style="width:50%; padding: 0 23px 23px; font-size: 16px; color: black; font-weight: bold;">Sold by:</p>
</td>
<td style="text-align: right;" width="112">
  <p style="width:50%; padding: 23px; font-size: 16px; color: black; font-weight: bold; text-align:left;">The Vendor address</p>
</td>