【CSS】ons-inputとons-selectの下線の位置を揃える方法

もの凄くニッチな記事ですが…OnsenUI の <Input /> 要素と <Select /> 要素を横に並べた際、要素の下線がズレてしまう時の対処法です。
参考にスクリーンショットを載せておきます。

見ての通り、<Input /> 要素と <Select /> 要素の下線位置がズレています。
機能には問題ありませんが、非常に気になるので修正します。

まず、それぞれの要素を下記のように配置します。

<div>
  <Input placeholder="氏名" float />
  <Select>
    <option>選択肢1</option>
    <option>選択肢2</option>
    <option>選択肢3</option>
  </Select>
</div>

で、CSS は下記のようにします。

.div {
  position: relative;
}
ons-input {
  width: 60%;
  margin: 15px 0 5px;
  padding: 0;
}
ons-select {
  width: 35%;
  margin-left: 3%;
  position: absolute;
  top: 6px;
}

ポイントは親要素の <div> 要素に position: relative; を指定し、<Select /> 要素に position: absolute; を指定している点です。
こうすることで <Select /> 要素を、親要素の <div> 要素を基準とした絶対位置で指定することができます。
あとは、実際の画面を確認しながら、<Select /> 要素の位置を下げればOKです。
私が見た感じでは、top: 6px; がちょうど良さそうでした。

もしくは下記のように指定してもOKです。

div {
  position: relative;
  height: 50px;
  margin-bottom: 5px;
}
ons-input {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60%;
  margin-top: 15px;
  padding: 0;
}
ons-select {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 35%;
}

1つ目のサンプルコードでは、<Select /> に要素のみ position: absolute; を指定して絶対位置を指定していましたが、今回のサンプルでは、<Input /> 要素にも position: absolute; を指定しました。
この状態で両方の要素に bottom: 0; を指定すれば、子要素の位置が親要素の一番下から 0 距離の位置に配置されるので、下線の位置が揃います。
なおこの時、どちらの要素にも margin-bottom プロパティは 0 以外を指定しないようにしましょう。

また、親要素に height プロパティで高さを指定する事もお忘れなく。
全ての子要素に position: absolute; を指定している場合、これがないと親要素の高さが 0 になり、これまたレイアウトが崩れます。

2つの方法を紹介しましたが、どちらでも要素の下線の位置は揃うはずですので、あとはお好みでお選びください。

以上、Onsen UI の <Input /> 要素と <Select /> を横に並べた時、下線の位置を揃える方法でした。
ご参考になれば幸いです。