###前提・実現したいこと
CSSのdiv#content内に、コメントへのリプライを階層化する.nested_commentsを追加したのですが、うまく階層化されません。nested_commentsのmargin-leftが反映されるにはどのようにしたら良いでしょうか。
###該当のソースコード
div#content { float: left; width: $container_width - $sidebar_width - 20px; padding: 10px 10px 10px 0; p.article_footer, p.comment_footer { border-top: 1px #ccf dashed; padding-top: 4px; text-align: right; font-size: 75%; } .nested_comments { margin-left: 30px; } .nested_comments .nested_comments .nested_comments .nested_comments { margin-left: 0; } }
body { background-color: white; color: black; margin: 0; padding: 0; padding-top: 120px; } $container_width: 1300px; $sidebar_width: 230px; div#container { margin: 0 auto; padding-top: 5px; width: $container_width; }
<h3>Comments</h3> <p>test</p> <p class="comment_footer"> <a href="/entries/10/comments/11/edit">Edit</a> | <a data-confirm="Are you sure to delete this comment?" rel="nofollow" data-method="delete" href="/entries/10/comments/11">Delete</a> | by <a href="/users/1/comments">Testuser</a> | 2017/08/18 09:14 | <a href="/entries/10/comments/new.11?parent_id=11">Reply</a> </p> <div class="nested_comments"></div><p>test2</p> <p class="comment_footer"> <a href="/entries/10/comments/12/edit">Edit</a> | <a data-confirm="Are you sure to delete this comment?" rel="nofollow" data-method="delete" href="/entries/10/comments/12">Delete</a> | by <a href="/users/1/comments">Testuser</a> | 2017/08/18 10:25 | <a href="/entries/10/comments/new.12?parent_id=12">Reply</a> </p> <div class="nested_comments"></div><p>test3</p> <p class="comment_footer"> <a href="/entries/10/comments/13/edit">Edit</a> | <a data-confirm="Are you sure to delete this comment?" rel="nofollow" data-method="delete" href="/entries/10/comments/13">Delete</a> | by <a href="/users/1/comments">Testuser</a> | 2017/08/18 22:44 | <a href="/entries/10/comments/new.13?parent_id=13">Reply</a> </p>
module CommentsHelper def nested_comments(comments) comments.map do |comment, sub_comments| render(comment) + content_tag(:div, nested_comments(sub_comments), :class => "nested_comments") end.join.html_safe end end
<%= nested_comments @comments.arrange(:order => :created_at) %>
ソース確認したところコメントに対するリプライが<div class="nested_comments"></div>
囲まれていないのことがわかったので、view helperなどを変えてみたのですがダメでした。
HTMLを追記してください。