ログインの文字・メールアドレス・パスワードのフォーム・ログインボタンの位置を移動させたい

ログインの文字・メールアドレス・パスワードのフォーム・ログインボタンの位置を移動させたいです。
htmlには

<ul class="top-menu">
            <h3 class="login">ログイン</h3>

            <div class="container">
            <form action="{% url 'login' %}" method="post" role="form">
                {% csrf_token %}
            <div class="form-group">
                <label class="email_form">メールアドレス</label>
                <input for="id_email" name="email" type="text" value="" placeholder="メールアドレス" class="form-control"/>
            </div>
            <div class="form-group">
                <label class="password_form">パスワード</label>
                <input id="id_password" name="password" type="password" value="" minlength="8" maxlength="12" placeholder="パスワード" class="form-control"/>
            </div>

            <button type="submit" class="btn btn-primary btn-lg">ログイン</button>
            <input name="next" type="hidden" value="{{ next }}"/>
            </form>

            </div>
        </ul>

と書きました。cssに

h3,
.login
 {
    width: 200px;
    height: 100px;
 }

nav{
    width: 90%;
    height: 60px;
    margin: 0 auto;
    text-align: left;
}
.title{
    float: left;
    width: 200px;
    line-height: 60px;
}
.top-menu{
    float: right;
    width: 30%;
    line-height: 30px;
}

と書きました。

のようにメールアドレス・パスワードのフォーム・ログインボタンを右寄せで自分が意図した位置に持っていきたいです。 widthと heightをいじってみたのですが、上に移動しなかったりもう少し右へ寄せたいのに寄せられなかったりで、なかなかうまくいきません。widthと heightだけで場所を移動させようとしているのが間違っているのでしょうか？どうすれば自分が意図しているピクセルの場所に移動させられるでしょうか？

回答をうけ今、htmlには

<div class="container">
            <form class="form-inline" action="{% url 'login' %}" method="post" role="form">
                {% csrf_token %}
            <div class="form-group">
                <label class="email_form">メールアドレス</label>
                <input for="id_email" name="email" type="text" value="" placeholder="メールアドレス" class="form-control"/>
            </div>
            <div class="form-group">
                <label class="password_form">パスワード</label>
                <input id="id_password" name="password" type="password" value="" minlength="8" maxlength="12" placeholder="パスワード" class="form-control"/>
            </div>

            <button type="submit" class="btn btn-primary btn-lg">ログイン</button>
            <input name="next" type="hidden" value="{{ next }}"/>
            </form>

            </div>

と書きました。
cssには

.clearfix::after{
    content: "";
    clear: both;
    display: block;
}
header{
    width: 100%;
    height: 100px;
    background-color: pink;
}
nav{
    width: 90%;
    height: 60px;
    margin: 0 auto;
    text-align: left;
}
.title{
    float: left;
    width: 200px;
    line-height: 60px;
}
.top-menu{
    float: right;
    width: 30%;
    line-height: 30px;
}

と書きました。
今のログインフォームの状態は

のようになっています。

m.ts10806

2017/10/02 05:27

未解決の質問をそのままに次々と質問をたてられていますが大丈夫ですか？ひとつひとつ着実に解決していった方が混乱しなくて済むと思うのですが。。。

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

回答2件

ベストアンサー

前の質問とどちらにつけるか迷ったのですが、こちらに書いておきます。
前の質問：https://teratail.com/questions/93866

Bootflat は、最初に書いてある通り、Bootstrapを利用したフレームワークです。
http://bootflat.github.io/index.html

BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework.

(BOOTFLATはBootstrap 3.3.0 CSSフレームワークに基づくオープンソースのフラットUIキットです。)

したがって、Bootstrap も読み込まねばなりません。
README.markdownにも次のような例があります。

HTML
1<!doctype html>
2<html>
3    <head>
4        <title>Minimal Bootflat example</title>
5        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
6        <link rel="stylesheet" href="https://bootflat.github.io/bootflat/css/bootflat.css">
7    </head>
8
9    <body>
10        <h1>Test bootflat</h1>
11        <a class="btn btn-primary">Flat button</a>
12
13        <!-- Bootstrap -->
14        <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
15        <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
16
17        <!-- Bootflat's JS files.-->
18        <script src="https://bootflat.github.io/bootflat/js/icheck.min.js"></script>
19        <script src="https://bootflat.github.io/bootflat/js/jquery.fs.selecter.min.js"></script>
20        <script src="https://bootflat.github.io/bootflat/js/jquery.fs.stepper.min.js"></script>
21
22    </body>
23</html>

bootflat.min.css に bootstrap.min.css も含まれていると思ったのでしょうか？
ファイルサイズから考えてもここには含まれていません。

投稿2017/10/02 08:39

x_x

総合スコア13749

クラス名の振り方からするとbootstrapですかね？
bootstrapであれば自身でこねくり回さなくても一発でできる方法があります。
下記を参考にしてください。

横並びにもできる！Bootstrapで作るform(フォーム)の作り方

追記：
ひとまずBootstrap CDNを利用で、ご提示のHTML,CSSを利用した結果は下記です。

※静的HTMLのため変数部分はそのまま出ています。

やはり、Bootstrapが正しく読み込まれてないのでは？と思います。

投稿2017/10/02 05:30

編集2017/10/02 07:46

m.ts10806

総合スコア80850

退会済みユーザー

2017/10/02 05:52

ありがとうございます。form class=”form-inline"　とする、ということでしょうか？やってみたのですが、右並びにならなくて。。。

m.ts10806

2017/10/02 05:58

どうなったのでしょうか？今回の対応を入れることで不要となるCSSの指定は削除しましたか？ float入れられてたりline-heightが入っていたり色々するようですが。

m.ts10806

2017/10/02 05:59

ちなみにbootstrapを利用されているという前提の回答なので、 bootstrapを使用していない（または使用しようとしているがbootstrapがきいていない）状況では試しても意味がありません。

退会済みユーザー

2017/10/02 06:30

質問文に今の状態を追記しました。CSSの指定は削除したつもりですし、bootstrapは使っています

m.ts10806

2017/10/02 07:34

bootstrapバージョンはどれですか？結局今、どういう状態なんでしょうか？スクリーンショットお願いできますか？

m.ts10806

2017/10/02 07:47

私の方の実行結果のスクリーンショットを貼りました。

退会済みユーザー

2017/10/02 07:55

bootstrap ではなくbootflatを使っています。http://bootflat.github.io/documentation.html

退会済みユーザー

2017/10/02 07:55

それが原因なのでしょうか？今の状態を質問文に追記しておきます。

m.ts10806

2017/10/02 08:01 編集

スクリーンショット拝見しましたが、これ、そもそもCSSフレームワークが正しく当たってませんね。何もないhtmlの初期状態です。一応、自身で追加したcssはあたってるかな？という状態。ブラウザの開発ツールでは指定しているcssとjavascriptに404エラーか何か出てると思いますよ。少し前の質問「BootstrapがHTMLに当たっていない」（https://teratail.com/questions/93866）の解決が優先と思います。

退会済みユーザー

2017/10/02 08:09

google検証で読み込みのエラーは一切出ていません。あと、bootflatはちゃんと当たっています。色の変更などがちゃんと反映されたので。なので、読み込みや当たっていないことが原因ではないです

m.ts10806

2017/10/02 08:23

入力コントロール、ボタンなどがデフォルト状態にしか見えませんが・・。「BootflatはBootstrap 3.3.0もサポートしています。」とのことなので、同じ機能は同じ指定の仕方でいけるはずですけどね。 Bootflat利用にBootstrapが必須とかありませんか？

m.ts10806

2017/10/02 08:26

https://amg-solution.jp/blog/4917 あくまで「Bootstrapの拡張機能」「Bootstrapベースのテーマ」という位置づけのようですし、 Bootstrapありきのように思います。

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

あなたの回答