質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.76%

  • HTML

    8319questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5342questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 128

kaitotokai

score 42

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>


とコードを書いたが、
イメージ説明
のように要素が全部縦に並んでしまった。
全部横に並ばせたいがどうしたらいいか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2018/06/05 17:50

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

    キャンセル

  • mts10806

    2018/06/05 17:56

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

    キャンセル

回答 3

checkベストアンサー

+1

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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/05 19:04

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

    キャンセル

  • 2018/06/06 09:28

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

    キャンセル

  • 2018/06/06 11:44

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

    キャンセル

  • 2018/06/06 11:58

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

    キャンセル

  • 2018/06/06 12:20

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

    キャンセル

  • 2018/06/06 12:54

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

    キャンセル

  • 2018/06/06 13:53

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

    キャンセル

+1

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

#id_form1{float:left;} 


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/05 18:42

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8319questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5342questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。