ul上有一个不方便的空白区域

Question

我试图在图像旁边放一个ul，但每次在某种程度上仍然是ul上方的空白区域，所以我想知道这是否正常。

感谢

.card {float: left;
  display: inline;
  width: 260px;
  height: 100px;
  margin-bottom: 10px;
  margin-right: 10px;

  border: 1px solid #e6e6e6;
}
.card ul {float: left;
  border: 1px solid #000;
  padding:0;
margin:0;
width:auto;

}
.card img {float: left;
  }



<div class="block3">

     <div class="clearfix"> 
 <% @users.each do |user| %>  
     <div class="card">
  <%= link_to(image_tag(user.avatar.url(:post).to_s),user_url(user.id)) %>
  <ul>
    <li class="clearfix">

  <li>
     <p class="name">

            <%= link_to user_path(user.id) do %>
        <%= user.name %> <%= user.surname %>
      <% end %>          
    </p>
  </li>            
</li>
</ul>  
</div> 
<% end %> 
</div>  
</div>

Answer 1

使用Firebug或在Chrome中检查元素（右键单击 - ＆gt;检查元素）并检查是否有任何默认样式，可以是浏览器或您正在使用的任何默认样式表。这也将告诉您样式的来源。

看起来您要将名称添加为<p>元素 - Firefox和Safari默认情况下都会向段落添加1em边距（https://stackoverflow.com/a/819190/1255142），这可能就是您的问题。

您可能还想使用CSS重置模板清除默认值。

Answer 2

这很可能与ul中的列表项有关。由于我看不到您的代码，请检查这些列表项的行高，边距和填充。例如，如果列表项上有上下边距，则只需使用下边距将它们分开。