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 的标签s 或确保填充一致。最后，你需要 <br>添加换行符。

这是一个大概的例子(虽然，我没有用 span 包装 2 个新单元格的内容来设置不同的字体大小和字体颜色，您可以自己添加):

<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>

请注意，您可以使用 inline-block 用 2 列来实现它元素(请注意 vertical-align 应用于单元格和内部跨度，第二个用于防止内部元素与顶部对齐 by baseline of text ；或者您可以尝试 vertical-align: text-top for the div 而不是 top 为 span ):

<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>

但是，这可能更难以水平对齐，尤其是在宽度较小的屏幕上可能会出现问题。