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一起使用 - 请参阅下面的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用以下代码，您可以在第一行的顶部实现上传图像

<table>
  <tr>
    <td colspan="4" valign="top"> 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 3

你需要这个吗？

<table>
<tr style="display:flex;">
<td style="flex:1;"> 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>

CSS - 如果第二个是多行的话，如何在表格中首先修复？

3 个答案: