Question

以下是我正在使用的页面示例。问题是用户在将链接定向到目标页面之前必须单击该链接。有没有办法让每个链接的突出显示框都处于活动状态并响应点击？

我的用户抱怨说，除非他们点击链接，否则点击该框不起作用。

任何帮助将不胜感激。

 <html>
    <head>
    </head>
    <style type="text/css">
    li {
        background-color: #F5F2EE;
        background-position: left top;
        background-repeat: no-repeat;
        border: 1px solid #E9E3DD;
        height: auto;
        width: 100px;
        margin-bottom: 4px;
        padding: 4px 5px 4px 20px;
    }

    li a, span {
        color: #4B0F19;
        text-decoration: none;
    }

    li:hover {
        background-color: #DEB887;
        cursor: pointer;
    }
    </style>

    <body>
        Hello world

        <ul>
            <li><a href="http://google.com">Please see this</a></li>
            <li><a href="http://msn.com">Another link</a></li>
            <li><a href="http://twitter.com">The main link</a></li>
            <li><a href="http://bbc.co.uk">fourth link</a></li>
        </ul>

    </body>
</html>

Answer 1

使li有0填充和边距，a display: block;，并将样式移至a。
这样a将展开以填充所有li，因此不会有任何区域作为菜单项的一部分，但它不会被a填充。

这有意义吗？你了解不同的方法吗？

直播示例：http://jsfiddle.net/NB6Wx/

（您还可以使用JavaScript捕获li上的点击，并触发a中的点击...但这将修补一个实际可以解决的问题。）
（一个糟糕的解决方案。）

Answer 2

据我所知，问题是<a>显示为内联元素。您可以修改CSS以使其成为块元素，它将占用整个<li>元素。

像

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

Answer 3

您需要在CSS中添加li a {display:block;}。

这是一个工作DEMO

单击突出显示的无序列表中的链接

3 个答案: