奇怪的线条突然出现？

Question

我的网络应用程序的列表项之间出现了一条奇怪的黑色小水平线。我使用 HTML、CSS、ruby 和 sinatra 创建了它。我不确定它们来自哪里，并且查看了开发工具，但仍然无法找到任何东西。

图片：

HTML/Ruby：

 `<h2>All Contacts</h2>


<% num = @@rolodex.counter %>
<% if num == 1 then number = "contact" %>
<% else number = "contacts" %>
<% end %>

<h2>You have <%= "#{@@rolodex.counter} #{number}" %>.</h2>

<ul class="contacts-list">
    <% @@rolodex.contacts.each do |contact| %>
        <a href="/contacts/<%= contact.id %>" class="hover">
            <li class="contactcards"> 
            <%= contact.first_name %> <%= contact.last_name %> <hr> 
            <%= contact.email %> <br> 
            Note: <%= contact.note %> <br> 
            ID: <%= contact.id %>
            </li>
        </a>
    <% end %>
</ul>`

CSS：

.contactcards {
    min-width: 200px;
    width: 24%;
    height: 100px;
    background-color: slategray;
    display: inline-block;
    margin-top: 30px;
    text-align: center;
    opacity: .7;
    list-style-type: none;
    color: white

所有联系人列表都是文本居中对齐。

还应注意，该行仅在页面上存在多个联系人时可见（也就是在将新联系人输入到 rolodex 之后）。我不知道那条线是从哪里来的。对此的任何帮助将不胜感激。

Answer 1

来自fine <ul> specification：

允许的内容

零个或多个li 元素。

这可能看起来像 HTML：

<ul>
  <a>
    <li>...</li>
  </a>
</ul>

但事实并非如此。唯一可以作为<ul> 直接后代的是<li>，因此结构必须为：

<ul>
  <li>
    <a>...</a>
  </li>
</ul>

当浏览器看到无效的“HTML”时，它通常会在呈现之前尝试更正它以匹配规范。这个修正过程可能会引入额外的<li> 和<ul> 元素，这可能就是神秘黑线的来源。