Q&A
（質問文は編集できます）HTMLも提示してください。また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
CSSにてfloat: right;したのですが、Add newリンクが右に寄りません。
下記にてコードを記載します。
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Myblog</title> 5 <meta name="csrf-param" content="authenticity_token" /> 6<meta name="csrf-token" content="qxbXbHu2BkZwNEdNtGM0vVmxq31nO4E9Mes3JO9uRUFnM7tlmgk9Rprj2ihAD+WdDXOS+V8BbkKr9UnzgsNmVg==" /> 7 8 <link rel="stylesheet" media="all" href="/assets/comments.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> 9<link rel="stylesheet" media="all" href="/assets/posts.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> 10<link rel="stylesheet" media="all" href="/assets/application.self-4449f96f60b55c753a583d030ad61ccd3dc3d328020318ffad65759c0a592856.css?body=1" data-turbolinks-track="reload" /> 11 <script src="/assets/rails-ujs.self-8944eaf3f9a2615ce7c830a810ed630e296633063af8bb7441d5702fbe3ea597.js?body=1" data-turbolinks-track="reload"></script> 12<script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1" data-turbolinks-track="reload"></script> 13<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1" data-turbolinks-track="reload"></script> 14<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script> 15<script src="/assets/comments.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> 16<script src="/assets/posts.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> 17<script src="/assets/application.self-eba3cb53a585a0960ade5a8cb94253892706bb20e3f12097a13463b1f12a4528.js?body=1" data-turbolinks-track="reload"></script> 18 </head> 19 <body> 20 <div class="container"> <!-- 中央揃え --> 21 <h1><a href="/"><img class="logo" src="/assets/logo-aaf899d0d69e732c37d3239f4956ec5ff38173f20386a16fea49234eb19ed37c.png" alt="Logo" /></a></h1> 22 <h2> 23 My Posts 24 <a class="header-menu" href="/posts/new">Add new</a> 25</h2> 26<ul> 27 <li> 28 <a href="/posts/7">12345 updated</a> 29 <a class="command" href="/posts/7/edit">[Edit]</a> 30 <a class="command" data-confirm="Shure?" rel="nofollow" data-method="delete" href="/posts/7">[x]</a> 31 </li> 32 <li> 33 <a href="/posts/6">a</a> 34 <a class="command" href="/posts/6/edit">[Edit]</a> 35 <a class="command" data-confirm="Shure?" rel="nofollow" data-method="delete" href="/posts/6">[x]</a> 36 </li> 37 <li> 38 <a href="/posts/5">title 4</a> 39 <a class="command" href="/posts/5/edit">[Edit]</a> 40 <a class="command" data-confirm="Shure?" rel="nofollow" data-method="delete" href="/posts/5">[x]</a> 41 </li> 42 <li> 43 <a href="/posts/4">title 3</a> 44 <a class="command" href="/posts/4/edit">[Edit]</a> 45 <a class="command" data-confirm="Shure?" rel="nofollow" data-method="delete" href="/posts/4">[x]</a> 46 </li> 47 <li> 48 <a href="/posts/3">title 2</a> 49 <a class="command" href="/posts/3/edit">[Edit]</a> 50 <a class="command" data-confirm="Shure?" rel="nofollow" data-method="delete" href="/posts/3">[x]</a> 51 </li> 52 <li> 53 <a href="/posts/2">title 1</a> 54 <a class="command" href="/posts/2/edit">[Edit]</a> 55 <a class="command" data-confirm="Shure?" rel="nofollow" data-method="delete" href="/posts/2">[x]</a> 56 </li> 57 <li> 58 <a href="/posts/1">title 0</a> 59 <a class="command" href="/posts/1/edit">[Edit]</a> 60 <a class="command" data-confirm="Shure?" rel="nofollow" data-method="delete" href="/posts/1">[x]</a> 61 </li> 62</ul> 63 64 </div> 65 </body> 66 67 68</html> 69
INDEX
1<h2> 2 My Posts 3 <%= link_to "Add new", new_post_path, class: "header-menu" %> 4</h2> 5<ul> 6 <% @posts.each do |post| %> 7 <li> 8 <%= link_to post.title, post_path(post) %> 9 <%= link_to "[Edit]", edit_post_path(post), class: "command" %> 10 <%= link_to "[x]", post_path(post), 11 method: :delete, class: "command", 12 data: { confirm: "Shure?" } %> 13 </li> 14 <% end %> 15</ul>
CSS
1.container{ 2 width: 400px; 3 margin: 20px auto; 4} 5 6body{ 7 font-family: Verdana, sans-serif; 8 font-size: 14px; 9} 10 11 12h2{ 13 font-size: 16px; 14 padding-bottom: 10px; 15 margin-bottom: 15px; 16 border-bottom: 1px solid #ddd; 17} 18 19ul > li{ 20 margin-bottom: 5px; 21} 22 23.logo{ 24 width: 400px; 25 height: 80px; 26} 27 28.header_menu{ 29 font-size: 12px; 30 font-weight: normal; 31 margin: auto; 32 float: right; 33}
初学者につき、どなたかご教授願いたいです。
回答2件
ベストアンサー0
やりたいことはこれではないですか？
css
1margin-left: auto; 2margin-right: 0;
投稿2020/02/21 07:17
総合スコア63
あなたの回答
tips
プレビュー
