2つのフォームとその要素を一列に並べたい

Question

2つのフォームとその要素を一列に並べたい。

<form name="form1" id="id_form1" action="" method="POST" enctype="multipart/form-data">
    <button type="button"　class="btn btn-default button">
        <span>宿泊開始</span><br>
        <time class="btn-horus__value"  id="datetime1">明日</time>
    </button>

    <button type="button"　class="btn btn-default button">
        <span>宿泊開始終了</span><br>
        <time class="btn-horus__value" id="datetime2">明後日</time>
    </button>

    <button id="submit" class="btn btn-default button" >検索</button>
</form>


<form name="form2" id="id_form2" method="POST" enctype="multipart/form-data">
    <div class="form-check">
    <input type="checkbox" class="filled-in form-check-input">
    <label id="breakfast" class="form-check-label" for="line">朝食付き</label>
    </div>
</form>

とhtmlにかき、

<style type="text/css">

#submit{float:right;}
#id_form2{float:right;}
#breakfast{padding-left:20px;}

</style>

とcssに書いた。

すると、宿泊開始・宿泊開始終了のボタンは左に、検索ボタンと朝食付きのチェックボックスは右に寄った。

----------
宿泊開始	宿泊開始終了  朝食付きのチェックボックス　検索ボタン	
----------

の順に一列にこれらの要素を配置したいが、どうcssを修正すればいいか？

#id_form2{float:left;} 

とcssを書き換えても結果が意図したものにならなかった。

回答を受けて、

<form name="form1" id="id_form1" action="javascript:void(0)" method="POST" enctype="multipart/form-data">
    <div id="startbtn">
        <button type="button"　class="btn btn-default button">
        <span>宿泊開始</span><br>
        <time class="btn-horus__value"  id="datetime1">明日</time>
    </button>
    </div>

    <div id="endbtn">
        <button type="button"　class="btn btn-default button">
        <span>宿泊開始終了</span><br>
        <time class="btn-horus__value" id="datetime2">明後日</time>
    </button>
    </div>

    <div id="chk">
        <input type="checkbox" class="filled-in form-check-input">
        <label id="breakfast" class="form-check-label" for="line">朝食付き</label>
    </div>

    <button id="submit" class="btn btn-default button" >検索</button>
</form>

とコードを書いたが、

のように要素が全部縦に並んでしまった。
全部横に並ばせたいがどうしたらいいか？

Comments

[x_x]

引用符が全角になっているので(breakfastのところ)直してもらえるでしょうか？

[m.ts10806]

CSSフレームワークをお使いでしたらそれもバージョンと併せて質問に追記してください。

Answer 1

無理に別のフォームに入れた状態でレイアウトを苦慮せずとも、form属性を使えばいいのではないでしょうか？

<input type="checkbox" class="filled-in form-check-input" form="id_form2" />

https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input

Comments

[kaitotokai]

ありがとうございます。そのように書くと、検索ボタンだけ明日・明後日・朝食付きの要素の下に来てしまいます・・・。この場合どうしたらいいでしょうか？

[x_x]

なりませんが。
まず、指摘の修正を入れて現状のコードを提示してみてはどうでしょうか？

[kaitotokai]

回答してくださったコードを反映させたものを質問文にupしました。もしお分かりでしたらお願いします

[x_x]

divが増えていますが、それでレイアウトしたいということでしょうか？

[kaitotokai]

はい、そうです。でもdivを増やしたのは、配置したいものを囲えば移動できるかなと思っただけなので、divが必要ないなら消してしまっても構いません

[x_x]

一例です。いろいろ考えられると思います。
#id_form1 { display: flex; justify-content: center; }

[kaitotokai]

ありがとうございます。できました！！

Answer 2

form1とform2に分けているのは何か意図があるのでしょうか？
同じフォーム内でないと朝食付きのチェックが検索条件として取得できないような。
順序を整えれば表示も意図通りになるかと思います。

<form name="form1" id="id_form1" action="" method="POST" enctype="multipart/form-data">
    <button type="button"　class="btn btn-default button">
        <span>宿泊開始</span><br>
        <time class="btn-horus__value"  id="datetime1">明日</time>
    </button>

    <button type="button"　class="btn btn-default button">
        <span>宿泊開始終了</span><br>
        <time class="btn-horus__value" id="datetime2">明後日</time>
    </button>

    <div class="form-check">
    <input type="checkbox" class="filled-in form-check-input">
    <label id=“breakfast” class="form-check-label" for="line">朝食付き</label>
    </div>

    <button id="submit" class="btn btn-default button" >検索</button>
</form>

Comments

[kaitotokai]

ありがとうございます。form1とform2に分けているのはそれぞれの選択を別々に送信したいからです。form1とform2を分けた場合に横並びにする方法はありませんか？

Answer 3

formがデフォルトでdisplay: block;なので

#id_form1{float:left;} 

を追記したら、横並びになります。