html - CSS - 如果第二个 是多行的，如何修复顶部表格中的第一个 ？

Question

在下面的这段代码中，您将看到第一个 td 中的“上传图片”文本已向下移动(因为下一个 td 中的多行输入)。但我希望将此文本固定在顶部。我该怎么做？

<table>
  <tr>
    <td> Upload Image </td>
    <td> <input type="file" name="images[]" /> <br>
      <input type="file" name="images[]" /> <br>
      <input type="file" name="images[]" /> <br>
      <input type="file" name="images[]" /> <br>
    </td>
  </tr>
</table>

Answer 1

使用 vertical-align: top 到带有文本的 td - 请参见下面的演示:

table tr > td:first-child {
  vertical-align: top;
}

<table>
  <tr>
    <td>Upload Image</td>
    <td>
      <input type="file" name="images[]" />
      <br>
      <input type="file" name="images[]" />
      <br>
      <input type="file" name="images[]" />
      <br>
      <input type="file" name="images[]" />
      <br>
    </td>
  </tr>
</table>