回答編集履歴
2
画像追加
answer
CHANGED
|
@@ -11,10 +11,6 @@
|
|
|
11
11
|
display: inline-block;
|
|
12
12
|
text-align: left;
|
|
13
13
|
}
|
|
14
|
-
|
|
15
|
-
.form-item {
|
|
16
|
-
display: inline-block;
|
|
17
|
-
}
|
|
18
14
|
```
|
|
19
15
|
|
|
20
16
|
`text-align` は要素内のテキスト(インライン要素)の配置を指定するプロパティです。
|
|
@@ -25,4 +21,10 @@
|
|
|
25
21
|
|
|
26
22
|
それだけだと、`.form-items`はブロック要素なので幅は親要素の幅と同じになりますので、コンテナブロック内で左端に配置されます。
|
|
27
23
|
`.form-items`に`display: inline-block;`を設定してインラインブロックにすると、幅は子要素の最大幅と同じになります。
|
|
28
|
-
親要素の`.contact__container`には`text-align: center;`が設定してあるので、`.form-items`は中央に配置されます。
|
|
24
|
+
親要素の`.contact__container`には`text-align: center;`が設定してあるので、`.form-items`は中央に配置されます。
|
|
25
|
+
|
|
26
|
+
文章だけでは分かりづらいかも知れませんので、下記の画像をみると直感的に理解しやすいかもです。
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
`.form-items`にピンクの背景色、`.contact__container`に水色の背景色をつけてます。
|
1
説明追記
answer
CHANGED
|
@@ -15,4 +15,14 @@
|
|
|
15
15
|
.form-item {
|
|
16
16
|
display: inline-block;
|
|
17
17
|
}
|
|
18
|
-
```
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
`text-align` は要素内のテキスト(インライン要素)の配置を指定するプロパティです。
|
|
21
|
+
インラインブロック要素も対象になります。
|
|
22
|
+
|
|
23
|
+
`.form-item`に`text-align: left;`を設定しても`.form-item`は左寄せにはなりません。
|
|
24
|
+
親要素の`.form-items`に設定すると、`.form-items`の範囲内で`.form-item`は左寄せになります。
|
|
25
|
+
|
|
26
|
+
それだけだと、`.form-items`はブロック要素なので幅は親要素の幅と同じになりますので、コンテナブロック内で左端に配置されます。
|
|
27
|
+
`.form-items`に`display: inline-block;`を設定してインラインブロックにすると、幅は子要素の最大幅と同じになります。
|
|
28
|
+
親要素の`.contact__container`には`text-align: center;`が設定してあるので、`.form-items`は中央に配置されます。
|