Question

可能重复：
Navigation hyperlinks only work when mouse is on the text

您可以设置指向＆lt;的全部宽度的链接吗？ li>而不仅仅是文本的位置？

这就是我的意思，我希望用户能够点击按钮上的任意位置并转到链接，而不仅仅是文字：http://jsfiddle.net/b7S4L/

其中一个问题是我不能使用display：block;因为我在＆lt;之后有一个数字a＆gt;链接例如（1）

Answer 1

如果需要，根本不要设置LI的样式，（浮动：左边和清除填充，边缘和列表样式类型除外）。将所有样式放在A上（并使用display：block）。

Answer 2

我不希望右边的数字在单独的行上问题，它应该在文本的右侧

我想我明白你在这里想做什么。虽然，我不确定，因为你的问题一直很混乱......

首先，执行在display: block上设置a。这是正确的做法。

然后，移动内的 a，并在里面添加span：

<li class="cat-item cat-item-147"> <a href="http://test.vps.graenseguiden.dk/newscat/food/" title="Vis alle indlæg i kategorien Food"> Food (4) </a> </li>

然后，需要一些额外的CSS。您应该将新CSS与您已有的CSS合并 - 对于演示，为了简单起见，我在HTML窗格中添加了它（标有）：

http://jsfiddle.net/thirtydot/b7S4L/3/

div.gg_newscats li a { display: block; padding: 16px 0; color: #333 } div.gg_newscats ul li { padding-top: 0; padding-bottom: 0 } div.gg_newscats li a span { color: #cc0014 } div.gg_newscats li a:hover { text-decoration: none } div.gg_newscats li a:hover span { text-decoration: underline }

span和:hover的混乱是为了保持颜色和下划线完全一样。

Answer 3

是的，只需从LI元素中删除任何填充，并根据需要在锚标记上推出填充

<li class="link-wrapper">
  <a href="http://this.com" >Go Here</a>
</li>

CSS

.link-wrapper{ 
  margin: 0;
  padding: 0;
 }

.link-wrapper a{
  display: block;
  padding: 3px 5px;
}

Answer 4

默认情况下，锚标记为inline boxes，这意味着它们不会完全填充其父级（它们不占用所有空间），并且它们仅缩小以适合其内容。因此，您应该使用此CSS来填充li元素的空间：

li a
{
   display: block;
   height: 100%;
}

另请注意，您应该从li元素中删除任何填充，并删除a元素的边距。这样，锚标记的边界符合li标记的边界。例如，查看Thought Results.

的链接

Answer 5

将display:block;添加到样式中，您就完成了设置！

修改

呃，没有看到jsFiddle的例子。如果您从LI移除顶部/底部填充并将其放在A上，并将计数放在SPAN内的A内，则这些规则将达到预期的效果：

div.gg_newscats a { display: block; height: 100%; padding: 10px; } div.gg_newscats a span { color: black; } div.gg_newscats ul li { float: left; font-size: 13px; margin-left: 2%; margin-top: 2px; text-align: center; width: 30%; padding: 2px; }

示例HTML：

<li class="cat-item cat-item-148"> <a title="Vis alle indlæg i kategorien Electrical" href="http://test.vps.graenseguiden.dk/newscat/electrical/"> Electrical (1) </a> </li>

Answer 6

我倾向于使用的一个解决方案是使用

在<a />元素块级别内生成<li />元素

display: block;

之后删除您在<li />元素上指定的任何填充，并将其添加到<a />元素上，您应该获得相同的视觉输出，但整个<li />作为链路

Answer 7

虽然您可以使用jQuery进行管理，但您也可以在大多数浏览器中使用简单的CSS：

<style>
ul { width: 200px; background: #ccc; }
li { line-height: 3em; }
a { display: block; width: 100%; height: 100%; padding: 5px; }
</style>
<ul>
<li><a href="#">This is a link</a></li>
</ul>

Answer 8

编辑2

新代码......更简单......只有我不喜欢的方式就是链接的文本修饰必须要去。

.cat-item
{
    padding: 0px;
}

.cat-item a
{
    padding: 13px 0px 13px 0px;
}

.cat-item span
{
    margin-left: 5px;
    color: black;
}

.cat-item a:hover
{
    text-decoration:none;
}

我不得不稍微更改标记（将数字放在一个范围内）但除此之外它不是太多

演示：http://jsfiddle.net/ZW6uV/1

由于导入样式表存在冲突，

必须加入！important。

修改

读者摘要版：不要将你的填充放在<li> ......上。将填充放在<a>内的<li>上，然后它将填充空白区域并具有相同的效果，但也能够处理点击。 -snip -

Answer 9

由于您使用的是jQuery，因此可以这样做：

$("li.cat-item").click(function () {
    $("a", this).click();
    return false;
});

设置指向<li>的链接，而不仅仅是文本</li>

9 个答案:

编辑2

修改