Question

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

我的..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 %>

我的css文件：

...
table {
   border-collapse: collapse;
}

tbody {
  border: 3px solid #000;
}

Answer 1

您可以添加到<td>代码border和/或padding，尝试以下内容：

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

并调整值，直到获得所需结果。

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

Answer 2

我已经解决了这个问题，但我有一点问题：我得到每行3个元素（我想要它）在第二行我得到1个元素，在第三行我得到3个元素。

问题出在哪里？我想在每一行3个元素

我的解决方案：

.. html.erb：

<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>

CSS文件：

table {
    border-spacing: 15px;
}

td {
border: 3px solid black;
}

如何在网格视图中显示？

2 个答案: