Html 如何显示<；t车身>；在网格视图中？

如何在网格视图中显示元素（水平，每行3-4个元素），元素之间有足够的空间？ 我用

margin

试过了，但没用

My..html.erb：

<h1> Einträge </h1>

<table>
<% @listings.each do |listing| %>
  <tbody>
    <tr>
     <th><%= listing.title %></th>
    </tr>
    <tr>
     <td><%= listing.text %></td>
    </tr>
    <tr>
     <td><%= listing.zipcode %>, <%= listing.city %></td>
    </tr>
    <tr>
     <td><%= link_to 'Anzeigen', listing_path(listing) %></td>
     <td><%= link_to 'Bearbeiten', edit_listing_path(listing) %></td>
     <td><%= link_to 'Löschen', listing_path(listing),
                                method: :delete,
                                data: { confirm: 'Sind Sie sicher?'} %></td>
    </tr>
  </tbody>
<% end %>
 </table>

  <%= link_to 'Neuer Eintrag', new_listing_path %>

<table>
  <% $c = 0 %>
  <% @listings.each do |listing| %>
  <% puts $c %>
  <% if $c == 3 %>
<tr>
  <td>
      <strong><%= listing.title %></strong>
    </br>
      <%= listing.text %>
    </br>
      <%= listing.zipcode %>, <%= listing.city %>
    </br>
      <%= link_to 'Anzeigen', listing_path(listing) %>
      <%= link_to 'Bearbeiten', edit_listing_path(listing) %>
      <%= link_to 'Löschen', listing_path(listing),
            method: :delete,
            data: { confirm: 'Sind Sie sicher?'} %> </td>
    <% $c = 0 %>
  </tr>
  <% else %>
<% $c += 1 %>
<td>
    <strong><%= listing.title %></strong>
  </br>
    <%= listing.text %>
  </br>
    <%= listing.zipcode %>, <%= listing.city %>
  </br>
    <%= link_to 'Anzeigen', listing_path(listing) %>
    <%= link_to 'Bearbeiten', edit_listing_path(listing) %>
    <%= link_to 'Löschen', listing_path(listing),
          method: :delete,
          data: { confirm: 'Sind Sie sicher?'} %> </td>
<% end %>
<% end %>
</table>

您可以添加到

标记

边框
和/或
填充
，尝试如下操作：

td {
  border: 30px solid #040;
  padding: 20px;
}

并调整这些值，直到得到所需的结果

注意：使用开发人员工具，您可以检查元素，您将得到这样的图像，其中包含视图中所有元素的
border
和
padding

我已经解决了那个问题，但我有一个小问题：
我每行得到3个元素（我希望如此），在第二行我得到1个元素，在第三行我又得到3个元素

问题出在哪里？我希望每行有3个元素

我的解决方案：

…html.erb：

<h1> Einträge </h1>

<table>
<% @listings.each do |listing| %>
  <tbody>
    <tr>
     <th><%= listing.title %></th>
    </tr>
    <tr>
     <td><%= listing.text %></td>
    </tr>
    <tr>
     <td><%= listing.zipcode %>, <%= listing.city %></td>
    </tr>
    <tr>
     <td><%= link_to 'Anzeigen', listing_path(listing) %></td>
     <td><%= link_to 'Bearbeiten', edit_listing_path(listing) %></td>
     <td><%= link_to 'Löschen', listing_path(listing),
                                method: :delete,
                                data: { confirm: 'Sind Sie sicher?'} %></td>
    </tr>
  </tbody>
<% end %>
 </table>

  <%= link_to 'Neuer Eintrag', new_listing_path %>

<table>
  <% $c = 0 %>
  <% @listings.each do |listing| %>
  <% puts $c %>
  <% if $c == 3 %>
<tr>
  <td>
      <strong><%= listing.title %></strong>
    </br>
      <%= listing.text %>
    </br>
      <%= listing.zipcode %>, <%= listing.city %>
    </br>
      <%= link_to 'Anzeigen', listing_path(listing) %>
      <%= link_to 'Bearbeiten', edit_listing_path(listing) %>
      <%= link_to 'Löschen', listing_path(listing),
            method: :delete,
            data: { confirm: 'Sind Sie sicher?'} %> </td>
    <% $c = 0 %>
  </tr>
  <% else %>
<% $c += 1 %>
<td>
    <strong><%= listing.title %></strong>
  </br>
    <%= listing.text %>
  </br>
    <%= listing.zipcode %>, <%= listing.city %>
  </br>
    <%= link_to 'Anzeigen', listing_path(listing) %>
    <%= link_to 'Bearbeiten', edit_listing_path(listing) %>
    <%= link_to 'Löschen', listing_path(listing),
          method: :delete,
          data: { confirm: 'Sind Sie sicher?'} %> </td>
<% end %>
<% end %>
</table>

要在单元格中添加空间吗？是的。并在“网格视图”中显示元素。每行3-4个元素。我曾经将我的资料分组为元素。你还可以对网格进行其他处理，但请先尝试我的答案中的建议，如果你不需要，请告诉我，看看我是否可以帮助你。谢谢你的帮助。这不是我想要的。但我用另一种方式解决了很高兴你解决了你的问题。