# liタグで ・ を適切な場所に表示させたい。

Question

前提・実現したいこと

簡単な画像投稿アプリを作っています。
意図しない位置に　・　がついていて、各コメントに・が付くようにしたいです。

該当のソースコード

<main class="main">
  <div class="inner">
    <div class="prototype__wrapper">
      <p class="prototype__hedding">
        <%= @prototype.title%>
      </p>
      <%= link_to "by#{@prototype.user.name} ", root_path, class: :prototype__user %>
      <%# プロトタイプの投稿者とログインしているユーザーが同じであれば以下を表示する %>
      <% if user_signed_in? && current_user.id == @prototype.user_id %>
        <div class="prototype__manage">
          <%= link_to "編集する", edit_prototype_path(@prototype.id), class: :prototype__btn %>
          <%= link_to "削除する", prototype_path(@prototype.id), method: :delete, class: :prototype__btn %>
        </div>
      <% end %>
      <%# // プロトタイプの投稿者とログインしているユーザーが同じであれば上記を表示する %>
      <div class="prototype__image">
        <%= image_tag @prototype.image %>
      </div>
      <div class="prototype__body">
        <div class="prototype__detail">
          <p class="detail__title">キャッチコピー</p>
          <p class="detail__message">
            <%= @prototype.catch_copy %>
          </p>
        </div>
        <div class="prototype__detail">
          <p class="detail__title">コンセプト</p>
          <p class="detail__message">
            <%= @prototype.concept %>
          </p>
        </div>
      </div>
      <div class="prototype__comments">
        <%# ログインしているユーザーには以下のコメント投稿フォームを表示する %>
        <% if user_signed_in? %>
          <%= form_with model: [@prototype,@comment], local: true do |f|%>
            <div class="field">
              <%= f.label :text, "コメント" %><br />
              <%= f.text_field :text %>
            </div>
            <div class="actions">
              <%= f.submit "送信する", class: :form__btn  %>
            </div>
          <% end %>
        <% end %>
        <%# // ログインしているユーザーには上記を表示する %>
        <ul class="comments_lists">
          <%# 投稿に紐づくコメントを一覧する処理を記述する %>
            <li class="comments_list">
              <% @comments.each do |comment| %>
              <p>
              <%= comment.text %>
              <%= link_to comment.user.name, root_path, class: :comment_user %>
              </p>
              <% end %>
            
             </li>
          <%# // 投稿に紐づくコメントを一覧する処理を記述する %>
        </ul>
      </div>
    </div>
  </div>
</main>

試したこと

ul,liの位置を変えながら調整しましたがうまくいきません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

<li></li>が正しくペアになっていないようにみえます。

追記

  <% @comments.each do |comment| %> 
   <li class="comments_list">
      <%= comment.text %>
      <%= link_to comment.user.name, root_path, class: :comment_user %>
   </li>
  <% end %>

Comments

[hiromu-t3966]

修正しましたが要素が横並びになってしまいました。

[hiromu-t3966]

pタグを追加して横並びにはなったのですが、最初の値にのみ　・　が適用されているのはなぜでしょうか。

[winterboum]

li 正しくないです。
ブラウザーでどういうHTMLになっているか確認してみて

[hiromu-t3966]

親要素、子要素それぞれ確認し、修正しましたが変わりません。

[hiromu-t3966]

いけました！毎回、本当にありがとうございます。