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元素中放置由p元素包围的范围，如下所示：

＆lt; p＆gt;＆lt; span id =＆＃39; msgSave＆＃39;＆gt;＆lt; / span＆gt;＆lt; / p＆gt;

由于p元素有默认中断。

如何定位动态内容以便其他内容不会移动

3 个答案: