このTwitterページの上部ログインフォームにて、アカウント名フィールドとパスワードフィールドの上辺の位置が揃っています。
これを再現しようとCSSを考えているのですが、参考にデベロッパーツールで確認してもどこにその指定があるのか分かりません。
分かる方いらっしゃいますか?調べ方もご教示いただけたら助かります。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するこのTwitterページの上部ログインフォームにて、アカウント名フィールドとパスワードフィールドの上辺の位置が揃っています。
これを再現しようとCSSを考えているのですが、参考にデベロッパーツールで確認してもどこにその指定があるのか分かりません。
分かる方いらっしゃいますか?調べ方もご教示いただけたら助かります。
これはCSSのFlexboxというスタイルが使用されているようです。
各inputフィールドは<div>
でbox化されており、その親要素の<form>
を見ると、display:flex
というスタイルが適用されています。
これにより、<form>
の子要素を横並びのレイアウトにすることができ、上辺の位置を合わせたようなスタイルになります。
以下サンプルです。
input {
margin: 5px 10px;
}
.LoginForm {
display: flex;
}
<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>