Question

这是我的代码：

<ul id="navigation">
  <li><a class="" href="#">Home</a></li>
  <li><a class="" href="#">Blog</a></li>
  <li><a class="" href="#">Services</a></li>
  <li><a class="" href="#">About</a></li>
</ul>

当鼠标悬停在每个列表项目之间时，有一个小符号光标。我注意到向左浮动将摆脱它，但后来我无法集中导航，我也试图这样做。有什么帮助吗？

所以重新上限，我期待：

将列表项空间化，不留任何多余空间。
悬停在项目之间时，不显示胡萝卜光标。
在页面上居中列出无序列表导航。

Answer 1

你可以做两件事之一。

您可以将父元素（#navigation）设置为cursor: pointer;，以阻止插入符号在链接之间显示：

http://jsfiddle.net/q49hb/1/

#navigation {
    cursor: pointer;
}

或者您可以删除<li>之间的空格，这是导致显示默认插入符光标类型的原因。

http://jsfiddle.net/q49hb/2/

<li><a class="" href="#">Home</a></li><li><a class="" href="#">Blog</a></li><li><a class="" href="#">Services</a></li><li><a class="" href="#">About</a></li>

编辑：选项2更好，（但代码不是很整齐），因为选项1让用户觉得空间是可点击的错觉（感谢@JoshC）

Answer 2

您可以设置减去 margin-left 以强制 LI 在一起并设置锚点的宽度：

demo

#navigation li {
    display: inline;
    margin-left: -4px;
}

#navigation a{
    width: 60px;
    display: inline-block;
}

Answer 3

以上答案都不正确甚至关闭。您需要用户知道什么是可点击的，什么不是。事实上，插入符号在列表项之间具有误导性和分散注意力。这是糟糕的用户体验。你不能用光标：指针闪现ul;然后一切都会变得可以点击，甚至是李的。

重置整个ul的可点击区域（甚至在列表项之间）

ul{
    cursor:default;
}

现在定义可点击的内容。

ul li{
    cursor:pointer;
}

如何从HTML / CSS导航中删除“插入符号”光标？

3 个答案: