当通过Javascript更改Disaply属性时，多个HTML字段显示在单独的行上

我有一个表格，点击按钮时可以编辑字段。我有一个小提琴设置：按钮的代码是：

<input type="submit" id="change" class="btn" value="Change" onclick="showEditFields();" />

showEditFields的工作原理如下：当我单击Change按钮时，按钮和标签消失，显示带有“勾号”图像的输入字段。我需要的是“勾号”出现在输入字段的旁边，而不是下方。我应该注意，如果输入和图像是从一开始就显示的（不是通过JS），那么显示也是正确的，如fiddle所示

---

我尝试使用CSS和样式，删除了所有自定义样式，更改了边距/填充属性等，但都不起作用。感谢您的帮助。谢谢。

块

元素占据整个可用宽度。只需将

和

的

显示：块更改为
内联块

只需将图像和输入设置为“内联块”而不是“块”。签出jsfiddle

document.getElementById('inpAmount').style.display='inline-block';
document.getElementById('saveChange').style.display='inline-block';

input
s和
img
s基本上都是内联元素。通过将它们的
显示
转到“block”来显示它们，这导致了此问题。请将它们设置为“inline”。检查此项：感谢您的回复。
document.getElementById('inpAmount').style.display='inline-block';
document.getElementById('saveChange').style.display='inline-block';