Question

我有以下标记，

<ul id="menu">              
    <li><a href="#">Something1</a></li>
    <li><a href="#">Something2</a></li>
    <li><a href="#">Something3</a></li>
    <li><a href="#">Something4</a></li>
</ul>

<li>有点大，左边有一个小图片，我必须实际点击<a>来激活链接。如何点击<li>激活链接？

EDIT1：

ul#menu li
{
    display:block;
    list-style: none;
    background: #e8eef4 url(images/arrow.png) 2% 50% no-repeat;
    border: 1px solid #b2b2b2;
    padding: 0;
    margin-top: 5px;
}

ul#menu li a
{

    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    padding-right:.5em;
    color: #696969;
}

Answer 1

#menu li { padding: 0px; }
#menu li a { margin: 0px; display: block; width: 100%; height: 100%; }

可能需要对IE6进行一些调整，但这是关于你如何做的。

Answer 2

正如Marineio所说，你可以使用onclick的{{1}}属性来改变<li>，通过javascript：

location.href

或者，您可以删除<li onclick="location.href='http://example';"> ... </li>中的任何边距或填充，并在<li>的左侧添加一个大填充，以避免文本超过项目符号。

Answer 3

只是抛出这个选项：

<ul id="menu">
    <a href="#"><li>Something1</li></a>
    <a href="#"><li>Something2</li></a>
    <a href="#"><li>Something3</li></a>
    <a href="#"><li>Something4</li></a>
</ul>

这是我在菜单中使用的样式，它使列表项本身成为超链接（类似于将图像作为链接的方式）。
对于样式，我通常应用这样的东西：

nav ul a {
    color: inherit;
    text-decoration: none;
}

然后，我可以将任何样式应用于＆lt; li＆gt;我希望。

注意：验证者会抱怨这种方法，但如果你像我一样并且不以你的生活为基础，这应该可以正常工作。

Answer 4

只需将链接文本包装在'p'标签或类似内容中，并为该元素添加边距和填充，这样就不会影响MiffTheFox给你的设置，即

<li> <a href="#"> <p>Link Text </p> </a> </li>

Answer 5

这将使整个<li>对象成为链接：

<li onclick="location.href='page.html';"  style="cursor:pointer;">...</li>

Answer 6

jquery这是另一个版本，jquery稍微短一些。假设<a>元素位于de <li>元素

内

$(li).click(function(){
    $(this).children().click();
});

Answer 7

以下似乎有效：

ul#menu li a {
    color:#696969;
    display:block;
    font-weight:bold;
    line-height:2.8;
    text-decoration:none;
    width:100%;
}

Answer 8

或者您可以在<li>：

的末尾创建一个空链接

<a href="link"></a>

.menu li{position:relative;padding:0;}
.link{
     bottom: 0;
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
}

这将创建一个完整的可点击<li>，并在您的真实链接上保留您的格式。它对于<div>标记也很有用

Answer 9

您可以在LI标记内尝试“onclick”事件，并在javascript中更改“location.href”。

您也可以尝试将li标签放在a标签中，但这可能不是有效的HTML。

Answer 10

我找到了一个简单的解决方案：将标签“ li”置于标签“ a”内：

<a href="#"><li>Something1</li></a>

Answer 11

Anchor href链接适用于li：

#menu li a {
       display:block;
    }

Answer 12

a {
  display: block;
  position: relative;
}

我认为这就是您所需要的。

Answer 13

如何通过点击＆lt; li＆gt;来激活HTML链接？

通过使您的链接与您的链接一样大：只需移动指令

即可

display: block;

从li到a，你就完成了。

那是：

#menu li
{
    /* no more display:block; on list item */

    list-style: none;
    background: #e8eef4 url(arrow.gif) 2% 50% no-repeat;
    border: 1px solid #b2b2b2;
    padding: 0;
    margin-top: 5px;
}

#menu li a
{
    display:block; /* moved to link */
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    padding-right:.5em;
    color: #696969;
}

附注：您可以从两个选择器中删除“ul”：＃menu是一个充分的指示，除非您需要对这两个规则赋予权重以覆盖其他指令。

Answer 14

使用jQuery，因此您不必在<li>元素上编写内联javascript：

$(document).ready(function(){
    $("li > a").each(function(index, value) {
        var link = $(this).attr("href");
        $(this).parent().bind("click", function() {
            location.href = link;
        });
    });
});

如何通过单击<li>？</li>激活HTML链接

14 个答案: