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

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所说,你可以通过javascript 使用改变的onclick属性:<li>location.href

<li onclick="location.href='http://example';"> ... </li>

或者,您可以删除任何边距或填充<li>,并在其左侧添加一个大填充,<a>以避免文本越过子弹.

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;
}

然后,我可以将任何样式应用于我希望的<li>.

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

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>