如何放置動態內容，以使其他內容不會移動

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>

我不知道您的布局是否允許您向左對齊，但這是一個解決方案

Answer 2

問題在於，表格單元格中的內容更改時，表格單元格將進行調整！ 這就是使用居中內容的表格單元的本質。

相反，您可以執行以下操作：

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

請注意，我為單元格增加了寬度-無論單元格中的內容如何（或多或少），這都應使它們保持相同的布局。

更好的方法是DIV，因為它們不會像表單元格那樣調整大小/移動。

Answer 3

或在同一td元素中，將ap元素所包圍的跨度放入這樣：

<p> <span id ='msgSave'> </ span> </ p>

由於p元素默認中斷。