色々なタイプでお問い合わせフォームを作る練習をしています。
「企業名」〜「電話番号」は縦の文字列・「必須」項目が揃っているのですが
「きっかけ」の部分と「お問い合わせ内容」の部分だけが
同じclass名のCSSでスタイルしても揃いません。
何が原因なのでしょうか？
前回同様なケースでアドバイスを頂いた通り
.container > div:nth-child(1) {
width: 15%;
min-width: 10em;
}
としているのですが・・・
「きっかけ」の部分と「お問い合わせ内容」部分も
同じ条件にコーディングしているつもりなのですが
原因に困っています。
アドバイスお願いします。
HTml
1 <body>
2 <form action="" method="POST">
3
4
5 <h2>お問い合わせフォーム内容</h2>
6 <div class="container">
7 <div>
8 <label for="i_company" class="question">
9 企業名</label>
10 </div>
11 <div>
12 <em>必須</em>
13 </div>
14 <div>
15 <input id="i_company" type="text" name="company" required >
16 </div>
17 </div>
18
19<div class="container">
20 <div>
21 <label for="i_name" class="question">
22 お名前</label>
23 </div>
24 <div>
25 <em>必須</em>
26 </div>
27 <div>
28 <input id="i_name" type="text" name="name" required>
29 </div>
30</div>
31
32<div class="container">
33 <div>
34 <label for="i_mailadrees" class="question">
35 メールアドレス</label>
36 </div>
37 <div>
38 <em>必須</em>
39 </div>
40 <div>
41 <input id="i_mailadrees" type="text" name="mailadrees" required>
42 </div>
43</div>
44
45<div class="container">
46 <div>
47 <label for="i_telnumber" class="question">
48 電話番号</label>
49 </div>
50 <div>
51 <em>必須</em>
52 </div>
53 <div>
54 <input id="i_telnumber" type="text" name="telnumber" required>
55 </div>
56</div>
57
58<div class="container">
59 <div>
60 <label>
61 きっかけ
62 </label>
63 </div>
64 <div>
65 <em>任意</em>
66 </div>
67 <div>
68 <div>
69 <input id="check01_01" type="checkbox">
70 <label for="check01_01">チラシ</label>
71 </div>
72
73 <div>
74 <input id="check01_02" type="checkbox">
75 <label for="check01_02">広告</label>
76 </div>
77
78 <div>
79 <input id="check01_03" type="checkbox">
80 <label for="check01_03">SNS</label>
81 </div>
82
83 <div>
84 <input id="check01_04" type="checkbox">
85 <label for="check01_04">DM</label>
86 </div>
87 </div>
88</div>
89
90 <!-- 問い合わせ内容マスト -->
91 <div class="container">
92 <div>
93 <label>
94 お問い合わせ内容
95 </label>
96 </div>
97 <div>
98 <em>必須</em>
99 </div>
100 <div>
101 <textarea required></textarea>
102 </div>
103
104 </div>
105</form>
css
1.container{
2 border-top: 1px solid #ddd;
3 padding-top: 24px;
4 padding-bottom: 24px;
5 width: 100%;
6 display:flex;
7 align-items: center;
8 justify-content: center;
9
10}
11
12.container label{
13 width: 100%;
14 max-width: 248px;
15 letter-spacing: 0.05em;
16 font-weight: bold;
17 font-size: 18px;
18}
19.container input{
20 border: 1px solid #ddd;
21 border-radius: 6px;
22 margin-left: 40px;
23 padding-left: 1em;
24 padding-right: 6em;
25 padding-bottom: 30px;
26 height: 30px;
27 flex: 1;
28 width: 100%;
29 max-width: 410px;
30 background: #eaedf2;
31 font-size: 18px;
32
33}
34
35.container textarea{
36 border: 1px solid #ddd;
37 border-radius: 6px;
38 margin-left: 40px;
39 padding-left: 1em;
40 padding-right: 6em;
41 height: 216px;
42 flex: 1;
43 width: 100%;
44 max-width: 410px;
45 background: #eaedf2;
46 font-size: 18px;
47 }
48
49.container > div:nth-child(1) {
50 width: 15%;
51 min-width: 10em;
52}
53
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/21 19:35