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

时间:2016-12-14 09:17:00

标签: html css vertical-alignment css-tables

在下面的代码中,您会看到第一个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>

3 个答案:

答案 0 :(得分:3)

vertical-align: toptd一起使用 - 请参阅下面的演示:

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分: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>

答案 2 :(得分:1)

你需要这个吗?

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