同じクラス名で設定しているが上下の文字位置がずれる

色々なタイプでお問い合わせフォームを作る練習をしています。

「企業名」〜「電話番号」は縦の文字列・「必須」項目が揃っているのですが
「きっかけ」の部分と「お問い合わせ内容」の部分だけが
同じ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

行動規範の内容に同意します

回答2件

とくに想定通りだと思いますが・・
3つまとめてセンタリングされています
3番目のdiv要素の幅が中身によってかわっているからでしょう

投稿2020/11/21 12:33

yambejp

総合スコア114829

chocon

2020/11/21 19:35

アドバイス有難う御座います。確かに３つまとめているのが原因でした。色々なパターンがあり本当に勉強になります。今後も宜しくお願いします。

行動規範の内容に同意します

ベストアンサー

flexの小要素の幅は、その内容に応じて変化するので、
それを統一する(つまり、すべての行の1列目の幅を統一する)ために、
widthを明示する
というのが前回のアドバイスの思惑でした。

前回の場合、幅が不揃いなのは1列目だけだったのですが、
今回は3列目も不揃いなので、そこにもwidthを明示すれば良いと思います。

css
1.container > div:nth-child(1) {
2    width: 15%;
3    min-width: 10em;
4}
5.container > div:nth-child(3) {
6    width: 60%;
7    min-width: 450px;
8}

投稿2020/11/21 12:24

gpsoft

総合スコア1323

chocon

2020/11/21 19:34

いつも有難う御座います。昨日のアドバイスもとても勉強のきっかけとなりました。しかし、チェックボタンを同じようにするとどうしても原因が色々試してもわからず・・・ widthを設定してあげるだけで解決できたんですね・・・また、nth-child(3)の部分もしっかりもう少し勉強してみます。あとすみません・・・チェックボックスが「チラシ」〜「DM」の部分とずれてしまいます。 <div class="container"> <div class="box_01"> <label> きっかけ </label> </div> <div> <em>任意</em> </div> <div> <div> <input id="check01_01" type="checkbox"> <label for="check01_01">チラシ</label> </div> <div> <input id="check01_02" type="checkbox"> <label for="check01_02">広告</label> </div> <div> <input id="check01_03" type="checkbox"> <label for="check01_03">SNS</label> </div> <div> <input id="check01_04" type="checkbox"> <label for="check01_04">DM</label> </div> </div> "box_01"クラスを設定して CSSにて .container input[type="checkbox"]{ vertical-align: middle; } をしてみたのですが適用されません。 position: relative;を使っても同じで・・これはフレックスボックスを使用しているから適用されないのでしょうか？

chocon

2020/11/21 20:25

追記：自分でもう少しトライすると解決することができました！別で次から次にすみません。 .box_01(チェックボックスの部分）を任意の横に置きたいのですが .container box_01{ margin-right: auto; } とスタイルしてみたのですがチェックボックスの位置は整ったものの「きっかけ」「任意」のボタンは一番左寄せになってしまいます。これは「きっかけ」「任意」を元の「企業名」〜「電話番号」と合わせるにはどのようにするのが良いのでしょうか？