44184


このTwitterページの上部ログインフォームにて、アカウント名フィールドとパスワードフィールドの上辺の位置が揃っています。

これを再現しようとCSSを考えているのですが、参考にデベロッパーツールで確認してもどこにその指定があるのか分かりません。

分かる方いらっしゃいますか？調べ方もご教示いただけたら助かります。  
![Twitterホームページ](https://i.stack.imgur.com/aYLmo.png)


CC BY-SA 4.0
2018-05-23T04:16:28.843
44173
2020-01-25T02:42:58.013
2020-01-25T02:42:58.013
32986
28621
question
css twitter-bootstrap
HTMLテキストフィールドの高さを合わせる方法は？


これはCSSのFlexboxというスタイルが使用されているようです。

各inputフィールドは`<div>`でbox化されており、その親要素の`<form>`を見ると、`display:flex`というスタイルが適用されています。

[![画像の説明をここに入力](https://i.stack.imgur.com/Wnf8i.jpg)](https://i.stack.imgur.com/Wnf8i.jpg)

これにより、`<form>`の子要素を横並びのレイアウトにすることができ、上辺の位置を合わせたようなスタイルになります。

以下サンプルです。

[code]

    input {
      margin: 5px 10px;
    }
    
    .LoginForm {
      display: flex;
    }
[/code]

[code]

    <h4>Flexbox未指定</h4>
    <div>
     <form>
      <div>
        <input type="text" placeholder="username"/>
      </div>
      <div>
        <input type="password" placeholder="password"/>
      </div>
     </form>
    <div>
    
    <h4>Flexbox指定</h4>
    <div>
     <form class="LoginForm">
      <div>
        <input type="text" placeholder="username"/>
      </div>
      <div>
        <input type="password" placeholder="password"/>
      </div>
     </form>
    <div>
[/code]

参考  
[要素を横並びにするならflex boxしかない！ -
Qiita](https://qiita.com/HiromuMasuda0228/items/baf8015076d7d90b8fea)


CC BY-SA 4.0
2018-05-23T07:17:26.773
44184
2018-05-23T07:17:26.773
27930
44173
answer