CSS - 如何使标签包围li

Question

我尝试将列表设为水平，如

我在悬停每个项目（文字和点）时尝试制作，然后当悬停<a>标签时光标相同

但是，对于text和dot而言，悬停text的情况确实如此。

第一个问题：我无法使宽度自动包括dot和text。
第二：我认为a标记必须包围li才能执行：将两者都悬停在一起（点和文本）。

如何做到这一点。感谢

这是我的代码 http://jsfiddle.net/Q6CZ2/

<div id="wrap">
      <ul id="navbar">
         <li><a href="#">Exhibits and Events</a>
         </li>
         <li><a href="#">About Us</a></li>
         <li><a href="#">Contact</a></li>
         <li><a href="#">Press</a></li>
      </ul>
   </div>

Answer 1

尝试this fiddle

它将“li”标签包装在“a”标签中，如下所示：

<a href="#"><li>Exhibits and Events
     </li></a>

这可能是你想要的。

至于你的第二个问题尝试删除：

* {
padding:0px;
margin:0px;
}

和

#wrap {
margin: 50px;
width:600px;
height:40px;
}

也try this fiddle

Answer 2

如果我理解你的问题，你想使用：

li{
    cursor:pointer;
}

虽然我不知道为什么你想要那个光标，因为这个点仍然不会作为一个链接。

Answer 3

1. 如果li指向要更改公告标记的光标，则需要更改悬停的光标
2. 由于您拥有规则#wrap a，因此它会覆盖规则#wrap li:hover
所应用的颜色

尝试

#wrap li:hover, #wrap li:hover a{
    color: #CCC;
    cursor: pointer;
}

演示：Fiddle

Answer 4

您可以将<a>标记保存在<li>标记内：

* {
    padding:0px;
    margin:0px;
}
#wrap li {
    float:left;
}
#wrap {
    /*border: 1px solid #000;*/
    margin: 50px;
    width:600px;
    height:40px;
}
#wrap li {
    width:150px;
    color:green;
}
#wrap a {
    margin-left:-20px;
    padding-left:20px;
    color:green;
    text-decoration:none;
    display:block;
}
#wrap li:hover,
#wrap li:hover a {
    color: #CCC;
}

http://jsfiddle.net/Q6CZ2/9/