teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

情報の追加

2017/10/02 07:58

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -104,4 +104,7 @@
104
104
  }
105
105
 
106
106
  ```
107
- と書きました。
107
+ と書きました。
108
+ 今のログインフォームの状態は
109
+ ![イメージ説明](9a566caf56ef61cfbc59268d87ef338e.png)
110
+ のようになっています。

1

情報の追加

2017/10/02 07:58

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -51,4 +51,57 @@
51
51
  ```
52
52
  と書きました。
53
53
  ![イメージ説明](e47b128e5827f9e166010e4719c097b0.png)
54
- のようにメールアドレス・パスワードのフォーム・ログインボタンを右寄せで自分が意図した位置に持っていきたいです。 widthと heightをいじってみたのですが、上に移動しなかったりもう少し右へ寄せたいのに寄せられなかったりで、なかなかうまくいきません。widthと heightだけで場所を移動させようとしているのが間違っているのでしょうか?どうすれば自分が意図しているピクセルの場所に移動させられるでしょうか?
54
+ のようにメールアドレス・パスワードのフォーム・ログインボタンを右寄せで自分が意図した位置に持っていきたいです。 widthと heightをいじってみたのですが、上に移動しなかったりもう少し右へ寄せたいのに寄せられなかったりで、なかなかうまくいきません。widthと heightだけで場所を移動させようとしているのが間違っているのでしょうか?どうすれば自分が意図しているピクセルの場所に移動させられるでしょうか?
55
+
56
+ 回答をうけ今、htmlには
57
+ ```ここに言語を入力
58
+ <div class="container">
59
+ <form class="form-inline" action="{% url 'login' %}" method="post" role="form">
60
+ {% csrf_token %}
61
+ <div class="form-group">
62
+ <label class="email_form">メールアドレス</label>
63
+ <input for="id_email" name="email" type="text" value="" placeholder="メールアドレス" class="form-control"/>
64
+ </div>
65
+ <div class="form-group">
66
+ <label class="password_form">パスワード</label>
67
+ <input id="id_password" name="password" type="password" value="" minlength="8" maxlength="12" placeholder="パスワード" class="form-control"/>
68
+ </div>
69
+
70
+ <button type="submit" class="btn btn-primary btn-lg">ログイン</button>
71
+ <input name="next" type="hidden" value="{{ next }}"/>
72
+ </form>
73
+
74
+ </div>
75
+ ```
76
+ と書きました。
77
+ cssには
78
+ ```ここに言語を入力
79
+ .clearfix::after{
80
+ content: "";
81
+ clear: both;
82
+ display: block;
83
+ }
84
+ header{
85
+ width: 100%;
86
+ height: 100px;
87
+ background-color: pink;
88
+ }
89
+ nav{
90
+ width: 90%;
91
+ height: 60px;
92
+ margin: 0 auto;
93
+ text-align: left;
94
+ }
95
+ .title{
96
+ float: left;
97
+ width: 200px;
98
+ line-height: 60px;
99
+ }
100
+ .top-menu{
101
+ float: right;
102
+ width: 30%;
103
+ line-height: 30px;
104
+ }
105
+
106
+ ```
107
+ と書きました。