下の画像の"お問い合わせ"の部分を左に寄せたいのですが画像の上部分のように中央右寄りになってしまいます。
text-alignやmargin-right:autoも試したのですがダメでした。
以下にコードを載せます。
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 </head> 8 <body> 9 <!-- ここからHTMLを書き始めてください --> 10 <header> 11 <h1>Progate</h1> 12 <ul> 13 <li>プログラミングとは</li> 14 <li>学べるレッスン</li> 15 <li>お問い合わせ</li> 16 </ul> 17 </header> 18 <main> 19 <h1>HELLO WORLD<span class="hello_world">.</span></h1> 20 <h2>プログラミングの世界へようこそ</h2> 21 <h3 class="lesson-h3">学べるレッスン</h3> 22 <div class="lesson"> 23 <div class="lesson-list"> 24 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> 25 <p>HTML & CSS</p> 26 </div> 27 <div class="lesson-list"> 28 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> 29 <p>PHP</p> 30 </div> 31 <div class="lesson-list"> 32 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> 33 <p>Ruby</p> 34 </div> 35 <div class="lesson-list"> 36 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"> 37 <p>Swift</p> 38 </div> 39 </div> 40 41 <div class="contact-form"> 42 <h3 class="section-title">お問い合わせ</h3> 43 <p>メールアドレス(必須)</p> 44 <input type="text"> 45 <p>お問い合わせ内容(必須)</p> 46 <textarea></textarea> 47 <p>※必須項目は必ずご入力ください</p> 48 <input class="contact-submit" type="submit" value="送信"> 49 </div> 50 </main> 51 </body> 52</html>
CSS
1html, body, 2ul, ol, li, 3h1, h2, h3, h4, h5, h6, p, 4form, input, div { 5 margin: 0; 6 padding: 0; 7} 8 9body { 10 font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; 11} 12 13li { 14 list-style: none; 15} 16 17/* ここからCSSを記述してください */ 18header{ 19 height:90px; 20 background-color:#26d0c9; 21 color:#fff; 22} 23 24header h1{ 25 font-size:36px; 26 margin:20px 40px; 27 float:left; 28} 29 30header li{ 31 padding:33px 20px; 32 float:left; 33} 34 35main{ 36 padding:100px 80px; 37} 38 39main h1{ 40 font-size:140px; 41} 42 43main h2{ 44 font-size:60px; 45} 46 47.hello_world{ 48 color:#ff4a4a; 49} 50 51.lesson-h3{ 52 font-size:28px; 53 border-bottom:2px solid #dee7ec; 54 padding-bottom:15px; 55 padding-top:100px; 56} 57 58 59.lesson-list{ 60 float:left; 61 padding-top:50px; 62 padding-right:40px; 63} 64 65.lesson-list p{ 66 font-size:24px; 67 padding-top:30px; 68 margin-bottom:100px; 69} 70 71 72.section-title{ 73 font-size:28px; 74 padding-bottom:15px; 75 border-bottom:2px solid #dee7ec; 76 margin-bottom:50px; 77 padding-top:100px; 78} 79 80.contact-form input, textarea{ 81 width:400px; 82 padding:20px; 83 font-size:18px; 84 margin-bottom:30px; 85 border: 1px solid #dee7ec; 86} 87 88.contact-form p{ 89 padding-bottom:10px; 90} 91 92.contact-submit{ 93 background-color:#dee7ec; 94 color:#889eab; 95}
どうか回答よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/14 14:19
2020/04/14 14:20