質問編集履歴

2

情報の追加

2017/10/02 07:58

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -211,3 +211,9 @@
211
211
  ```
212
212
 
213
213
  と書きました。
214
+
215
+ 今のログインフォームの状態は
216
+
217
+ ![イメージ説明](9a566caf56ef61cfbc59268d87ef338e.png)
218
+
219
+ のようになっています。

1

情報の追加

2017/10/02 07:58

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -105,3 +105,109 @@
105
105
  ![イメージ説明](e47b128e5827f9e166010e4719c097b0.png)
106
106
 
107
107
  のようにメールアドレス・パスワードのフォーム・ログインボタンを右寄せで自分が意図した位置に持っていきたいです。 widthと heightをいじってみたのですが、上に移動しなかったりもう少し右へ寄せたいのに寄せられなかったりで、なかなかうまくいきません。widthと heightだけで場所を移動させようとしているのが間違っているのでしょうか?どうすれば自分が意図しているピクセルの場所に移動させられるでしょうか?
108
+
109
+
110
+
111
+ 回答をうけ今、htmlには
112
+
113
+ ```ここに言語を入力
114
+
115
+ <div class="container">
116
+
117
+ <form class="form-inline" action="{% url 'login' %}" method="post" role="form">
118
+
119
+ {% csrf_token %}
120
+
121
+ <div class="form-group">
122
+
123
+ <label class="email_form">メールアドレス</label>
124
+
125
+ <input for="id_email" name="email" type="text" value="" placeholder="メールアドレス" class="form-control"/>
126
+
127
+ </div>
128
+
129
+ <div class="form-group">
130
+
131
+ <label class="password_form">パスワード</label>
132
+
133
+ <input id="id_password" name="password" type="password" value="" minlength="8" maxlength="12" placeholder="パスワード" class="form-control"/>
134
+
135
+ </div>
136
+
137
+
138
+
139
+ <button type="submit" class="btn btn-primary btn-lg">ログイン</button>
140
+
141
+ <input name="next" type="hidden" value="{{ next }}"/>
142
+
143
+ </form>
144
+
145
+
146
+
147
+ </div>
148
+
149
+ ```
150
+
151
+ と書きました。
152
+
153
+ cssには
154
+
155
+ ```ここに言語を入力
156
+
157
+ .clearfix::after{
158
+
159
+ content: "";
160
+
161
+ clear: both;
162
+
163
+ display: block;
164
+
165
+ }
166
+
167
+ header{
168
+
169
+ width: 100%;
170
+
171
+ height: 100px;
172
+
173
+ background-color: pink;
174
+
175
+ }
176
+
177
+ nav{
178
+
179
+ width: 90%;
180
+
181
+ height: 60px;
182
+
183
+ margin: 0 auto;
184
+
185
+ text-align: left;
186
+
187
+ }
188
+
189
+ .title{
190
+
191
+ float: left;
192
+
193
+ width: 200px;
194
+
195
+ line-height: 60px;
196
+
197
+ }
198
+
199
+ .top-menu{
200
+
201
+ float: right;
202
+
203
+ width: 30%;
204
+
205
+ line-height: 30px;
206
+
207
+ }
208
+
209
+
210
+
211
+ ```
212
+
213
+ と書きました。