html - CSS 2つのボタンが隣り合っており、1つはフォームにあり、もう1つはそうではありません。

Question

これらの2つのボタンを並べて配置する方法はありますか？フォームの終わりは自動的に新しい行をスローします。

<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;"

2番目のボタンへ。見た目では、フォームのリセットボタンになっているはずですが？<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ルールを追加して、2番目のボタンを右にフロートさせてみてください。

#regReset { float: right}

または、ボタン自体にスタイルを追加するだけです。

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