html - CSS 两个相邻的按钮，一个在表单中，一个不在

Question

有没有办法让这两个按钮并排排列。表单的末尾会自动抛出一个新行。

<form>
....
<button id="regSubmit" class="sbutton"><span class="register">SIGN UP</span></button>
</form>
<button id="regReset" class="sbutton"><span class="reset">RESET FIELDS</span></button>

Answer 1

困难重重，也许吧。

最简单的方法是添加：

onClick="return false;"

到第二个按钮。虽然，从外观上看，它应该是表单的重置按钮？不是<input type="reset" />更合适吗？

Answer 2

如果您真的不能在表单中拥有 regReset 按钮，可以尝试将 regReset 按钮隐藏在表单之外，并在表单内有一个按钮在 javascript 中单击它：

<form>
....
<button id="regSubmit" class="sbutton"><span class="register">SIGN UP</span></button>
<button id="regResetBtnClicker" onclick="document.getElementById('regReset').click();" class="sbutton"><span class="reset">RESET FIELDS</span></button>
</form>
<button id="regReset" style="display: none;" class="sbutton"><span class="reset">RESET FIELDS</span></button>

Answer 3

尝试通过添加 css 规则将第二个按钮浮动到右侧：

#regReset { float: right}

或者只是通过向按钮本身添加样式：

<button style="float: right" id="regReset" class="sbutton"><span class="reset">RESET FIELDS</span></button>