・以下、のHTML、CSSを記述すると、以下のレイアウトが作成されましたが想定していたデザインにならなかったため質問させて頂きました。
やりたいこととしては、以下になります。
当方CSSの知識があまり無く、教えて頂けると大変助かります。
宜しくお願い致します。
緑部分
1.<(戻るボタン)、タイトル、を縦方向に中央寄せ。
2.<(戻るボタン、)は左寄せ。
3.タイトル、は中央寄せ。
オレンジ部分
4.ABC、DEF、GHI、を全て等間隔に配置し、
縦方向に中央寄せ。
になります。
HTML
1<!DOCTYPE html> 2<html> 3<body> 4 <head> 5 <meta charset="utf-8"> 6 <title>テスト</title> 7 <link rel="stylesheet" href="sample.css"> 8 </head> 9 <main class="ly_cont"> 10 <div class="ly_cont_main"> 11 <div class="bl_pageTitle"> 12 <span class="el_pageTitle_label"> 13 <img src="img/back.svg" alt="icn_back" class="el_pageTitle_ico" width="10px" height="10px"> 14 </span> 15 <span class="el_pageTitle_label"> 16 タイトル 17 </span> 18 </div> 19 <div class="bl_pageNav_cont"> 20 <span class="el_pageNav_cont"> 21 1.ABC 22 </span> 23 <span class="el_pageNav_cont"> 24 2.DEF 25 </span> 26 <span class="el_pageNav_cont"> 27 3.GHI 28 </span> 29 </div> 30 </div> 31 </main> 32</body> 33</html>
CSS
1.ly_cont_main{ 2 background-color: aqua; 3 max-width: 800px; 4 min-width: 300px; 5} 6 7.bl_pageTitle{ 8 height: 50px; 9 background-color: rgb(72, 255, 0); 10 justify-content: center; 11} 12 13.bl_pageNav_cont{ 14 background-color: rgb(255, 174, 0); 15 height: 50px; 16 display:flex; 17 justify-content: space-between; 18}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/04/08 13:24