匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

フォームを横に並べた時に高さが合わない


食べログと同じような検索窓を作りたいんですけどうまく出来ないです。
https://tabelog.com/
カレンダーは不要です。
セレクトボックス2つとテキストボックス・送信ボタンを横並びにしたいんですが、テキストボックスと送信ボタンの上に隙間が出来ます。
jsfiddleにソースをアップしてます。
https://jsfiddle.net/6w3nwqj1/
どこを修正したら綺麗に横並びになってくれますか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2018/01/24 17:31:54
  • 終了:2018/01/31 17:35:03

回答(1件)

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2018/01/30 09:27:21

途中で面倒になったので中途半端ですが、食べログの検索窓のエッセンスを取り出しました。加えて、食べログでは、ボタンは position: absolute で絶対配置してたり、select に矢印を :after 疑似セレクタで設定していたりします。

<form class="search-form">
    <div class="input-wrap search-keyword">
        <input type="text" name="keyword" class="input-search-keyword" placeholder="キーワード">
    </div>

    <div class="input-wrap search-area">
        <select name="area" class="input-search-area">
            <option value="all" selected >すべての地域</option>
            <option value="11">あああ</option>
            <option value="12">いいい</option>
            <option value="13">ううう</option>
        </select>
    </div>

    <div class="input-wrap search-category">
        <select name="category" class="input-search-category">
            <option value="all" selected class="na">すべてのカテゴリー</option>
            <option value="11">あああ</option>
            <option value="12">いいい</option>
            <option value="13">ううう</option>
        </select>
    </div>

    <div class="input-wrap search-button">
        <input type="submit" value="検索" class="input-search-button">
    </div>
</form>

body {
  background: red;
  width: 100%;
}

body, div, input, select {
  margin: 0;
  padding: 0;
  border: 0;
}

.search-form {
  background: #fff;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}

.input-wrap {
  display: block;
  position: relative;
  float: left;
}

.input-wrap.search-keyword {
  width: 20%;
}

.input-search-keyword {
  width: 100%;
  height: 54px;
  padding-left: 5%;
}

.input-wrap.search-area {
  width: 30%;
}

.input-search-area {
  width: 100%;
  height: 54px;
  padding-left: 5%;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}

.input-wrap.search-category {
  width: 30%;
}

.input-search-category {
  width: 100%;
  height: 54px;
  padding-left: 5%;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}

.input-wrap.search-button {
  width: 20%;
}

.input-search-button {
  width: 100%;
  height: 54px;
  background: #ffc12a;
  cursor: pointer;
}
匿名回答1号

何をどうしたら良いかのポイントを書いておきます。検索項目は keyword とか area とかのことです。

* float: left で検索項目を横並びにする。
* 検索項目の親要素には width を指定してトータルで 100% に収まるようにする。
* input や select は 100% にして親要素にぴったり張り付くようにする。
* vertical-align: middle で入力位置の縦の中央寄せをする。

2018/01/30 09:32:51

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません