Javascript 需要帮助在html表单中对齐动态td元素吗

我有以下代码：

<tr>    
    <td style="display:none;" id="missing_person_report_label"><b>Enter image</b></td>
    <td style="display:none;" id="missing_person_report_image"><input type="file"><br/></td>
</tr>

代码按预期执行，但

tr

元素的对齐有问题。这是网页的截图。

我希望

Choose file

与上述所有元素具有相同的对齐方式，即我希望

Choose file

位于

Enter Image

标签的右侧。我该怎么做

编辑：完整代码可用：

编辑：那些说我应该将

样式

指定给

tr

而不是

td

的人，我已经尝试过这样做。如果我这样做，网页如下所示：

我希望右侧的所有元素具有相同的对齐方式。

@Ronith。 实际上，您可以将它们的CSS设置为块，这就是它们位于分隔行上的原因。您应该设置

display=“表格单元格”

表格{
宽度：100%；
}
运输署{
显示：表格单元格；
}

输入图像

@Ronith。 实际上，您可以将它们的CSS设置为块，这就是它们位于分隔行上的原因。您应该设置

display=“表格单元格”

表格{
宽度：100%；
}
运输署{
显示：表格单元格；
}

输入图像

尝试此操作-将display none（无显示）应用于tr（无显示）而非td（无显示），然后从功能显示块中再次应用

<tr style="display:none;" id="missing_person_report_row">    
  <td><b>Enter image</b></td>
  <td><input type="file"><br/></td>
</tr>

---

尝试此操作-将display none（显示无）应用于变速器档位，而不是变速器档位，然后从功能显示模块中再次将其应用

<tr style="display:none;" id="missing_person_report_row">    
  <td><b>Enter image</b></td>
  <td><input type="file"><br/></td>
</tr>

---

问题在于javascript中的display:block。在javascript代码中设置display:inline块：

document.getElementById("missing_person_report_label").style.display = "inline-block";  
document.getElementById("missing_person_report_image").style.display = "inline-block"; 

---

问题在于javascript中的display:block。在javascript代码中设置display:inline块：

document.getElementById("missing_person_report_label").style.display = "inline-block";  
document.getElementById("missing_person_report_image").style.display = "inline-block"; 

---

显示：块

生成一个html元素以获取其父元素的全宽。因此，您将tds设置为块级别元素，它们采用所有可用宽度，上面的一个将第二个推到下面

---

解决方案是不更改其默认显示属性。但是，尝试使用

内联块

或

表格单元格是表内tds的默认属性。
显示：块

生成一个html元素以获取其父元素的全宽。因此，您将tds设置为块级别元素，它们采用所有可用宽度，上面的一个将第二个推到下面

---

解决方案是不更改其默认显示属性。但是，尝试使用

内联块

或

表格单元格这是表中tds的默认属性。
共享完整的html代码共享完整的html代码添加
表单元格
而不是
块
对我来说很有效。谢谢@Ronith很高兴这对你有用。如果您没有更改默认属性，那么就不需要更改js。添加
表单元格
而不是
块
对我来说很有效。谢谢@Ronith很高兴这对你有用。如果您没有更改默认属性，那么就不需要更改js。