Q&A
headerlistクラス内に、menuクラス内のULとloginクラス内のULの２つあるが、それぞれをどのようなレイアウトに配置したいのか、説明してください。
できれば、画像で例示してもらうとより回答がつきやすいと思います。
実現したいこと
ulタグの中に入った子要素li要素を画面の両端に寄せたい *html cssの構成で間違っている点あればご指摘お願いします
発生している問題・分からないこと
ul要素が画面右端n
エラーメッセージ
error
1エラーメッセージなし
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <title>TOTALLY</title> 7 <meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト"> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <link rel="shortcut icon" href="img/favicon.ico"> 10 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 11 <link rel="stylesheet" href="css/style.css"> 12 <!-- googleフォントでフォントを選んでみましょう！ --> 13 14</head> 15<header> 16 <section class="header"> 17 <div class="headerlogo"> 18 <a href="#"><img src="img/logo.svg" alt=""></a> 19 </div> 20 <div class="wrapper"> 21 <div class="headerlist"> 22 <div class="menu"> 23 <ul> 24 <li><a href="#">ALL</a></li> 25 <li><a href="#">NEW</a></li> 26 <li><a href="#">VINTAGE</a></li> 27 <li><a href="#">CATEGORY</a></li> 28 <li><a href="#">LOOKBOOK</a></li> 29 <li><a href="#">BLOG</a></li> 30 </ul> 31 </div> 32 <div class="login"> 33 <ul> 34 <li><a href="#">LOGIN</a></li> 35 <li><a href="#">CONTACT</a></li> 36 </ul> 37 </div> 38 </div> 39 <div class="totallycontents"> 40 <div class="totally"> 41 <img src="img/item.jpg" alt=""> 42 </div> 43 <div class="info"> 44 <h1>TOTALLY Short Sleeve Shirt</h1> 45 <p>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキスト</p> 46 <p>￥9,999 +tax</p> 47 </div> 48 </div> 49 </div> 50 </section> 51</header> 52 53<body></body> 54<footer></footer> 55<*-------------------------------------------css------------------------------------------------/*> 56 57@charset "UTF-8"; 58 59#header { 60 max-width: 100%; 61 margin: 0 auto; 62} 63 64a { 65 text-decoration: none; 66 color: black; 67} 68 69.wrapper { 70 max-width: 100%; 71 margin: 0 auto; 72 border: 1px solid; 73} 74 75.header { 76 width: 100%; 77} 78 79 80.headerlogo { 81 text-align: center; 82 padding-top: 50px; 83} 84 85.headerlogo img { 86 width: 100px; 87 text-align: center; 88} 89 90.headerlist { 91 display: flex; 92 border-bottom: 1px solid #ccc; 93 padding-bottom: 20px; 94} 95 96.menu ul { 97 display: flex; 98 list-style: none; 99 gap: 20px; 100} 101 102.login ul { 103 display: flex; 104 list-style: none; 105 gap: 20px; 106} 107 108 109 110.totallycontents { 111 max-width: 800px; 112 display: flex; 113} 114 115.totally img { 116 width: 400px; 117} 118 119.info { 120 121} 122
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
自分で調べ解決方法を見つけ、実践したみたがうまく反映されず困っています
補足
特になし
回答1件
0
こうするとどうですか？
css
1.headerlist { 2 display: flex; 3 border-bottom: 1px solid #ccc; 4 padding-bottom: 20px; 5 justify-content: space-between; 6}
投稿2024/05/11 01:03
総合スコア37736
あなたの回答
tips
プレビュー
