html - JQuery 内联文本移位

Question

我有一个提交按钮，点击后，jquery 检查是否已选择任何内容。如果不是，那么它会在错误消息上显示（）。这是html：

<p id="error_message" style="display:inline">dfd</p><input type="submit" class="button" name="Submit" value="Submit" />

一开始消息是隐藏的，但如果用户在没有选择选项的情况下单击提交，则会显示该消息。问题是，我的文本上的显示会改变我的提交按钮。这是没有消息的提交的样子：

这是显示消息后的样子：

如您所见，提交按钮向右移动。如果我希望错误消息和提交都出现在同一行，我必须显示内联，但是如何防止任何移动？谢谢

Answer 1

如果您将按钮设置为float:right;它保持在其容器的右端，直到来自左 div 的内容强制它下降到下一行。

所以html：

<div class='container'>
    <p id='error_message' style='display:inline;float:left;' >dfd </p>
    <input type='submit' style='float:right;' name='submit'>
</div>

Answer 2

将按钮的位置设置为 absolute ，或将错误消息的宽度设置为固定值