Question

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

图片： enter image description here

HTML /红宝石：

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

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

怪异的线条出现在哪里？

1 个答案: