Question

我有以下列表，我试图在Rails应用程序中显示。我想显示每个用户的图像，然后列出他们旁边的每个“引脚”，按等级递减。我似乎无法获得正确的CSS编码，以显示每个用户在一个单独的行上。每个下一个用户都会向左浮动前一个列表。这是我的代码：

 <% @users.each do |user| %>
    <ul  class="ver2"> 
        <li><div><%= link_to (image_tag user.image(:small)), user %><h3><%= user.name %></h3></div></li> 
        <% user.pins.order('rank DESC').each do |pin| %>
            <% if pin.date == 2013 %> 
              <li><div class="square"><%= link_to (image_tag pin.image(:medium)), pin %><br/> #<%= pin.rank %> -  <%= truncate(pin.album, length:20) %> - <%= pin.artist %> -</div></li>
            <% end %>
        <% end %> 
    </ul>   
<% end %>

CSS：

.ver2 li {
  list-style: none;
  display: inline-block;
  width: 150px;
  float: left;
}
.ver2 img {
  height: 75px;
  width: 75px;
}
.square {
  width: 150px;
  height: 150px;
  text-align: center;
}

Answer 1

尝试在.ver li元素上添加clear：left。

在ROR中定位无序列表

1 个答案: