Q&A
一度質問テンプレートにそって書き直すことを強くすすめます。
ログアウトボタンが右に移動しません。htmlに
{% load static%} <html lang="ja"> <head> <meta charset="UTF-8"> <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> <link rel="stylesheet" href="{% static 'accounts/detail.css' %}"> <link rel="stylesheet" href="{% static 'bootflat/css/bootflat.min.css' %}"> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <title>XOXO</title> </head> <body> <header class="clearfix"> <nav> <h1 class="box title">XOXO</h1> <div class="container"> <form name="logout" method="post" action="{% url 'accounts:logout' %}"> {% csrf_token %} <button type="submit" class="box btn btn-primary" style="color:white">ログアウト</button> <input name="next" type="hidden"/> </form> </div> </nav> </header> <img class="img" src="{% static 'detail.jpg' %}" alt="詳細"> <div class="icon_wrapper"> <h3>I love you</h3> <p>miss you</p> </div> </body> </html>
と書きました。cssに
*{ margin: 0; padding: 0; } .clearfix::after{ content: ""; clear: both; display: block; } header{ width: 100%; height: 100px; background-color:black; } nav{ width: 90%; height: 60px; margin: 0 auto; text-align: left; } .title{ float:left; color:white; font-size: 70px; margin-top:10px; padding-top:-30px; padding-bottom:30px; padding-left:80px; padding-right:80px; height: 60px; } .btn btn-primary btn-lg{ margin-top:10px; padding-top:-30px; padding-bottom:30px; padding-left:80px; padding-right:80px; } .img{ float: left; position: relative; padding-top:30px; padding-left:80px; padding-right:80px; }
と書きました。floatやmargin・paddingを移動させてもログアウトボタンが右に移動しません。また、Chromeの開発者ツールを使って何が原因かを見ているのですが、それでも思うようにcssを動かせません。
ElementsのStyleで線を引かれている部分を一個一個全部直して見るしかないのでしょうか？
なぜこのようになっていてどう直せば良いでしょうか？
右ってどこでしょうか？位置が関わる場合には具体的な位置を記述（または図示）された方が欲しい回答を得られやすくなります。
私は具体的な解決策を提示していませんが、結局どのように解決されたのでしょうか？ https://teratail.com/help/question-tips#questionTips4-2
float:right;で解決しました
回答に対するコメントとして書いてください。リンク先Tipsの「アドバイス」部分ですね。
回答3件
0
とくに右に移動するような記述が見当たりませんが
たとえばbtn-primaryクラスのついたタグを右に移動するなら
CSS
1.btn-primary{ 2float:right; 3}
を記載するなどでしょう
.btn btn-primary btn-lg{
などの記載はタグの階層や、クラスの管理について理解が薄いか
凡ミスが多いかのどちらかではないでしょうか？
投稿2017/10/04 06:51
総合スコア117561
0
ベストアンサー
おそらくbootstrapだと思うので、bootstrapが提供しているCSSクラスに直接指定するのはオススメしません。
特にログアウトボタンであれば画面にひとつであることはほぼ保証されているものでしょうから、
idを振ってそれに対して指定すべきですね。
html
1<button type="submit" class="box btn btn-primary" id="logout">ログアウト</button>
css
1button#logout{ 2float:right; 3color:white 4}
そうすれば直接styleで記述している文字色の指定もできますし。
css
1.btn btn-primary btn-lg{
複数指定の仕方がおかしいですね。
それぞれクラスなので、頭に「.」をつける必要があります。あとは「,」で区切る。
余談ですが、全角スペースが入ってるので効かない指定がありますよ。
css
1↓ここ 2[ ]margin-top:10px; 3
投稿2017/10/04 07:01
総合スコア80886
0
float:right;で解決しました
投稿2017/10/04 08:40
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
