css - 黑线穿过盒子

添加link_to块之后，当我将鼠标悬停在框上时，现在会看到黑线-参见所附图片。尝试更改许多CSS属性，但无法解决问题。我的看法和CSS代码如下。有什么想法如何消除这条黑线吗？

**View Code**
<div class="categories">
   <ul>
      <%= link_to nqdc_user_path do %>
      <li>Sample Box</li>
      <% end %>
   </ul>
</div>

**CSS Code**

div.categories {
 margin-top: 25px;
 margin-left: 50px;
}

 ul {
     padding: 10px;
     color: white;
     list-style: none;
     text-align: center;
 }

 li {
   background-color: #4d4dff;
   padding: 25px;
   margin: 15px;
   display: inline-block;
   border-radius: 8px;
   font-size: 18px;
   color: white;
 }

 li:hover {
   background: #b3b3ff;
   color: black;
   text-decoration: none;
 }

源代码

<div class= "categories">
 <ul>
  <a href="/users/1/nqdc">
   <li>Sample Box</li>
  </a>
 </ul>
</div>

最佳答案

链接a元素应放在li元素内

 <li>
   <a href="">
         Sample Box
   </a>

   </li>

codepem

关于css - 黑线穿过盒子，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34501913/