回答編集履歴

1

フォーム位置の修正

2020/04/29 23:10

投稿

writegrint
writegrint

スコア22

test CHANGED
@@ -1,118 +1,10 @@
1
- 後は右に寄せたいです。
2
-
3
- ![![イメージ説明](cd62150891344a6a9125d3a8b225a0b7.png)説明](0ce8771dc20c3b49fe3f67a9f9fbe0f1.png)](873bfc7b2844eecf25c1ca1836c73bae.png)
4
-
5
- ```ここに言語を入力
6
-
7
- HTML
8
-
9
- <figure class="relative">
10
-
11
- <img src="airbnb.png" class="img-responsive mx-auto d-block" >
12
-
13
- <div class="absolute">
14
-
15
- <div class="row justify-content-end">
16
-
17
- <div class="border col-5">
18
-
19
- <br>
20
-
21
- <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ<h1>
22
-
23
-
24
-
25
- <h2>宿泊施設の内容を記入</h2>
26
-
27
- <br>
28
-
29
- <div class="row">
30
-
31
- <div class="col-md">
32
-
33
- <form>
34
-
35
- <div class="form-group">
36
-
37
- <input type="text" class="form-control">
38
-
39
- <div class="d-flex">
40
-
41
- <select class="form-control w-50">
42
-
43
- <option>まるまる貸切</option>
44
-
45
- <option>個室</option>
46
-
47
- <option>シェアルーム</option>
48
-
49
- </select>
50
-
51
- <select class="form-control w-50">
52
-
53
- <option>ゲスト1人</option>
54
-
55
- <option>ゲスト2人</option>
56
-
57
- <option>ゲスト3人</option>
58
-
59
- <option>ゲスト4人</option>
60
-
61
- <option>ゲスト5人</option>
62
-
63
- <option>ゲスト6人</option>
64
-
65
- <option>ゲスト7人</option>
66
-
67
- <option>ゲスト8人</option>
68
-
69
- <option>ゲスト9人</option>
70
-
71
- <option>ゲスト10人</option>
72
-
73
- <option>ゲスト11人</option>
74
-
75
- <option>ゲスト12人</option>
76
-
77
- <option>ゲスト13人</option>
78
-
79
- <option>ゲスト14人</option>
80
-
81
- <option>ゲスト15人</option>
82
-
83
- <option>ゲスト16人</option>
84
-
85
- </select>
86
-
87
- <button type="submit" class="btn btn-danger">はじめる</button>
88
-
89
- </div>
90
-
91
- </form>
92
-
93
- </div>
94
-
95
- </div>
96
-
97
- </div>
98
-
99
- </div>
100
-
101
- </div>
102
-
103
- </figure>
104
-
105
1
  ```
106
-
107
- ```ここに言語を入力
108
2
 
109
3
  CSS
110
4
 
111
5
  .relative {
112
6
 
113
7
  position: relative;
114
-
115
- width: 100%;
116
8
 
117
9
  }
118
10
 
@@ -122,10 +14,30 @@
122
14
 
123
15
  bottom:20%;
124
16
 
17
+ right: 15%;
18
+
19
+ background-color: white;
20
+
21
+ }
22
+
23
+ .px {
24
+
25
+ font-size: 320%;
26
+
27
+ }
28
+
29
+ .size1{
30
+
31
+ font-size: 100%;
32
+
125
33
  }
126
34
 
127
35
 
128
36
 
37
+ ```
129
38
 
39
+ ![イメージ説明](64dfa66f3aaff020eb17bfb6004692da.png)
130
40
 
131
- ```
41
+ 位置は合ってきました。
42
+
43
+ 後は余計に白くなった部分を消してフォーム全体のサイズを画像に合わせたいです。