为什么使用display inline和anchor tag后右边有一点标记？

Question

不知道你有没有注意到，我的锚标签在右边有一个小标记，这很可能是由css和html混合引起的。在这里：

<ul>

    <a href="#"> <li> <strong> Home Page </strong> </li> </a>
    <a href="#"> <li> <strong> My Profile </strong> </li> </a>
    <a href="#"> <li> <strong> Categories</strong> </li> </a>
    <a href="#"> <li> <strong> Contact </strong> </li> </a>

</ul>

这里是css：

   li {
   display: inline-block;
   list-style-type: none;
   padding-left: 25px;
   }   

   nav {
   width: 970px;
   margin: auto;
   text-align: center;
   }

   a {
   color: #C3C3C3;
   letter-spacing: 1px;
   }

现在，如果您自己尝试代码，您会在右边看到一条小线，这是什么原因造成的，我该如何消除它？

Answer 1

将此 css 规则添加到您的锚标记中：

text-decoration: none;

这将删除 link 末尾的下划线。

Answer 2

复制以下代码：第一种方式 CSS

 a:-webkit-any-link
 {    
    text-decoration:none;
    cursor: auto;
}

第二种方式 CSS

a {
   color: #C3C3C3;
   letter-spacing: 1px;
   text-decoration:none;
   }

Answer 3

这条小线是默认underline-anchor-style的片段。所以只需为标签 <a> 添加 text-decoration: none。

Answer 4

实际上你不应该在 ul 中使用 a 标签。它不符合 W3C。正确的方法是：

<ul>
    <li><a href="#"><strong>Home Page</strong></a></li>
    <li><a href="#"><strong>My Profile</strong></a></li>
    <li><a href="#"><strong>Categories</strong></a></li>
    <li><a href="#"><strong>Contact</strong></a></li>
</ul>

您可以在 http://validator.w3.org/

检查标记的有效性

标记是空格的下划线。使用空格作为分隔符不是好的做法。为边距和填充使用样式是更好的方法。

为什么使用display inline和anchor tag后右边有一点标记？

Why is there a little mark on the right after using display inline and anchor tag?

html

css

anchor

padding