html - 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 中检查元素（右键单击 -> 检查元素）并检查是否有任何默认样式，无论是来自您的浏览器还是您正在使用的任何默认样式表。这还将告诉您样式的来源。

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

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

Answer 2

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