一个标签有高度但不能被点击

Question

我有一个问题，我有一个标签包裹的 li 标签，它们都有一个高度，但链接不起作用。我对为什么感到困惑，但这是一个小提琴和我的代码。

<div id="homepageContentLeft">
        <ul>
            <a href="register.php"><li><span>Register Here</span></li></a>
            <a href="map.php"><li><span>Race Map</span></li></a>
            <a href="donate.php"><li><span>Donate</span></li></a>
            <a class="last" href="http://cff.org" target="_blank"><li class="last" ><img src="pictures/cfflogo1.png" alt="CFF" /></li></a>
        </ul>
    </div>

    <div id="slidesContainer">
        <div href="register.php" id="freeTShirt">Free T-shirt W/ Registration.</div>

        <div id="slides">
            <img src="pictures/pic1.jpg" alt="Race Beginning"/>
            <img src="pictures/pic2.jpg" alt="Race Beginning"/>
            <img src="pictures/pic3.jpg" alt="Race Beginning"/>
            <img src="pictures/pic4.jpg" alt="Race Beginning"/>
        </div>
    </div>

这是我的scss

#homepageContent {
    width: $pageWidth;
    margin: 1% auto;
    margin-bottom: 0;
    overflow: hidden;

    #homepageContentLeft, #slides {
        float: left;
    }

    #homepageContentLeft {
        width: 30%;
        text-align: center;

        ul {
            list-style: none;
            margin-top: 0px;
            margin-right: 15px;
            margin-left: 0px;
            padding-left: 0px;
            margin-bottom: 0px;

            li:first-of-type {
                margin-top: 0px;
                //background-image: -webkit-linear-gradient(top, #A21945, #7A0026);
            }

            a {
                overflow: hidden;
                cursor: pointer;
                display: block;
                height: 85px;
                margin-bottom: 17px;


                li {
                    height: 85px;
                    vertical-align: middle;
                    font-size: 1.6em;
                    background-color: #0099ff;
                    color: white;
                    border-radius: 10px;
                    cursor: pointer;

                    span {
                        display: inline-block;
                        vertical-align: middle;
                        line-height: 85px;
                        width: 100%;
                    }

                    img {
                        display: block;
                        max-width: 100%;
                        height: 90%;
                        width: auto/9;
                        margin: 0 auto;
                    }
                }
            }


            li:hover {
                //background-image: -webkit-linear-gradient(top, #666666, #3d3d3d);
            }
            li.last, a.last {
                margin-bottom: 0px;
            }
        }
    }

http://jsfiddle.net/keS96/

Answer 1

快速浏览了一下，发现您有很多可疑/错误的标记。

1. 将链接放在 li 中，而不是将 li 放在链接中。

<ul>
  <li>
    <a href="#" title="Link title" class="yourClass">Linktext</a>
  </li>
</ul>

1. 通过 CSS 指定样式，而不是在标记中指定样式。标记用于标记，样式表用于样式。

回答您的问题： 您将 float: left; 分配给 homepageContentLeft 元素。 slidesContainer 没有浮动属性，因此它的宽度“覆盖”了导航。为它分配一个浮动元素，您将解决您的问题。

Answer 2

您的问题与列表项或链接的高度无关。问题是#slidesContainer 正在渲染所有内容并阻止点击事件。当您从 DOM 中手动删除该节点时，链接会按预期工作。

Answer 3

您的“a”标签需要在您的“li”标签内。