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

快速地看了一眼，看到你有很多可疑/错误的标记。

将链接放在li里面，而不是链接里面的li。

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

通过CSS分配样式，而不是在标记内分配样式。标记用于标记，Stylingsheet用于样式化。

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

Answer 2

您的“a”标签必须位于“li”标签内。

Answer 3

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

enter image description here

标签有高度但无法单击

3 个答案: