私はHTMLテンプレートに2つのボタンがあり、1つはフォーム内に、もう1つはフォーム外にあります。どのように私はそれらがインラインで現れるようにCSSを介してそれらのスタイルを設定するのですか？ 2番目のボタンにdisplay: inlineを含めても機能しません。2つのボタンのインライン化<form>の外側に1つ
など。 display: inline-blockはトリックを行う必要があります追加
<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>TRY THIS：ここ
は、実行可能なスニペットです。
form input[type="submit"] {
display: inline-block;
padding: 10px;
background-color: #000000;
color: #ffffff;
float: left;
margin:5px;
}
.button {
display: inline-block;
padding: 10px;
background-color: #000000;
color: #ffffff;
border: 0;
float: left;
margin:5px;
}<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button class="button">OK_2</button>あなたは上記のすべてのスタイルをカスタマイズすることができます。
：次のスニペットを見て、どのようにOK_1とOK_2は、インライン（のみCSSを使用して）表示されます。
form {
display: inline-block;
}<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>単に親フレックスコンテナますflex formatting contextで
body { display: flex; }<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>、フレックスアイテム（フレックスコンテナの子要素）ラインデフォルトでは一列に並んでいます。
他のフォームではできないように、フォームにクラスを指定する必要があります。
form.inline_after {
display: inline-block;
}<pre>↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓The form element is <span style="border: 4px dotted red; color: magenta; background-color: maroon;">in red</span>!↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓</pre>
<form style="border: 4px dotted red; color: magenta; background-color: maroon;" class="inline_after" action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input style="margin: 5px; padding: 5px; color: magenta; background-color: maroon;" class="inline_after" class="button" type="submit" value="Button in the form!" onclick='alert("This is in the "+this.parentElement.nodeName+" element!")'>
</form>
<button style="padding: 5px;" onclick='alert("This is in the "+this.parentElement.nodeName+" element!")'>
Button out of the form, but inline!
</button>フォームのCSSを作成します。
form {
float: left;
margin-right: 10px;
}<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>これは短い答え:)
である私は答えはそれをチェックアウト追加されました – Gowtham
フォーム要素からボタンを削除し、JavaScriptを使用してフォームをトリガーするボタンを取得します。 – Dai
@Dai OPはcssとhtmlを使いたがっています。なぜ簡単なことにJavaを使うのですか？ –