javascript - 如何定位动态内容，使其他内容不移动

Question

我尝试在用户点击保存按钮后设置消息。消息应为“记录已成功保存!”在“保存”按钮旁边或与表格的右侧对齐。这是我的 HTML:

<tr>
    <td align="center">
        <button type="button" name="save" id="save" onclick="pgSave();">Save</button>
        <span id="msgSave"></span>
    </td>
</tr>

Javascript:

document.getElementById("msgSave").innerHTML = "Record has been saved successfully!";

当前消息将显示，但保存按钮将向左滑动。我不希望我的按钮在消息出现后移动。有什么办法可以解决这个问题吗？我应该设置标准宽度还是我的 HTML 中有其他错误。

Answer 1

如果你把你的tr向左对齐，就不会有幻灯片

<tr>
    <td align="left">
        <button type="button" name="save" id="save" onclick="pgSave();">Save</button>
        <span id="msgSave"></span>
    </td>
</tr>

我不知道你的布局是否允许你左对齐，但这是一个解决方案