Q&A
状況
下記画像[目標]の様にレイアウトしたく思っております。
文字サイズ要素(dlタグ)、input要素(divタグ)、ログイン要素(divタグ)のbottomを揃え、
文字サイズ要素(dlタグ)、input要素(divタグ)のheightが揃っている状態にしたいです。
質問
[現状]はflexboxで横並びにしてmargin-topでbottomが揃う様に微調整をしているのですが、
良い方法ではない気がしております。又、文字サイズ要素とinput要素のheightも揃っておりません。
flexboxを使うところまでは合理的な方法だと思っているのですが、
この様なレイアウトの時はどういう考え方をすれば良いのでしょうか。
※細かなスタイルはまだ実装しておりません。
(要素間の距離等)
[現状]
⬇︎
[目標]
[現状]のコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="css/style.css"> 6 </head> 7 <body> 8 <header> 9 <!-- fontsize --> 10 <dl class="fontsize"> 11 <dt>文字サイズ</dt> 12 <dd> 13 <ul> 14 <li>小</li> 15 <li>中</li> 16 <li>大</li> 17 </ul> 18 </dd> 19 </dl> 20 <!-- input_elements --> 21 <div class="input_elements"> 22 <input type="text" placeholder="キーワードを入力"> 23 <input type="submit" value="サイト内検索"> 24 </div> 25 <!-- login --> 26 <div class="login">ログイン</div> 27 </header> 28 </body> 29</html>
css
1header { 2 display: flex; 3 height: 50px; 4} 5/* fontsize */ 6.fontsize { 7 margin: 25px 0 0 0; 8 display: table; 9} 10.fontsize dt { 11 display: table-cell; 12 vertical-align: middle; 13} 14.fontsize dd { 15 margin: 0; 16 box-sizing: border-box; 17} 18.fontsize ul { 19 display: flex; 20 list-style: none; 21 padding: 0; 22 margin: 0; 23 border: 1px solid gray; 24 border-radius: 5px; 25} 26.fontsize li + li { 27 border-left: 1px solid gray; 28} 29 30/* input_elements */ 31.input_elements { 32 height: 22px; 33 margin-top: 28px; 34 box-sizing: border-box; 35} 36 37/* login */ 38.login { 39 width: 150px; 40 line-height: 50px; 41 text-align: center; 42 background-color: #4B88CA; 43 color: white; 44 border-radius: 5px; 45} 46
回答1件
0
ベストアンサー
Flexbox ならば、align-items: flex-end;で下辺に揃います。
css
1header { 2 display: flex; 3 align-items: flex-end; /*追加*/ 4 height: 50px; 5}
投稿2020/03/15 13:11
総合スコア33715
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/19 08:16