如何在我的索引页面上制作单独的元素以进行样式设置？答案

【问题标题】：How to make posts on my index page seperate elements for styling purposes?如何在我的索引页面上制作单独的元素以进行样式设置？
【发布时间】：2014-10-28 02:07:02
【问题描述】：

我的帖子作为一个元素出现在我的索引页面上。为了样式目的，我想让每个单独的帖子都表现为不同的元素。（旁注：我正在尝试垂直显示每个帖子，并在每个帖子周围显示一个边框）我将在下面发布我的代码。

索引视图：

<li class="thought">
<% @thoughts.each do |f| %>
<span class="title"><%= f.title %></span>
<span class="content"><%= f.content %></span>
<span class="timestamp">
Posted <%= time_ago_in_words(f.created_at) %> ago.
</span>
<% end %>
</li>

控制器 CSS：

.thought {
float: left;
display: block;
width:300px;
height:150px;
}

索引操作：

def index
@thoughts =  Thought.order('created_at desc')



end

谢谢。

【问题讨论】：

标签： html css ruby-on-rails ruby ruby-on-rails-4

【解决方案1】：

只需将列表项标签放在each 循环内：

<% @thoughts.each do |f| %>
  <li class="thought">
    <span class="title"><%= f.title %></span>
    <span class="content"><%= f.content %></span>
    <span class="timestamp">
      Posted <%= time_ago_in_words(f.created_at) %> ago.
    </span>
  </li>
<% end %>

【讨论】：

谢谢。如何让它们垂直显示？
您现在应该有一个思想元素列表，要垂直显示它们，您需要使用 CSS 进行一些样式设置。如果您不确定如何实现，我建议您ask a new question。

【解决方案2】：

我不确定我是否完全理解您的意图，但 ERB + rails 为您提供了遍历每个 @thoughts 的美感

例如你可以这样做：

<% @thoughts.each do |thought| %>
   <h1 class="thought"> thought.attributes </h1>
<%end%>

这将导致您的每个想法都在它自己的 h1 中，并带有自己的 css。

希望这会有所帮助。

【讨论】：