只有链接框中的文本是可点击的

时间:2012-05-24 15:18:14

标签: html css hyperlink

在网页上我有一个缩略图列表,上面有链接框。它们由链接标记包装,可以单击。但是,在它们顶部的链接框中,背景略微透明,它只是文本,而不是可点击的整个框。

这是一组缩略图和链接框的HTML代码:

<article class="recent-post-item">
    <h2>
        <a  href="link/to/somewhere" title="Permanent link to Something">Something</a>
    </h2>
    <a href="link/to/somewhere" title="Something" class="thumb">
        <img src="someimage.png" alt="Something" width="248" height="125" />
    </a>
</article>

这是相应的样式表:

#column-2 .recent-post-item {
    height: 127px;
    width: 250px;
    position: relative;
    border: none;
}
#column-2 .thumb {
    margin: 0;
    position: absolute;
    top: 0px;
    left: 0px;
}
#column-2 h2 {
    font-size: 22px;
    background-color:rgba(255,255,255,0.6);
    padding: 5px 4px;
    margin: 0;
    position: absolute;
    z-index: 1;
    bottom: 1px;
    left: 1px;
    right: 1px;
}

并且有一个显示问题的工作网站:http://fuckthepony.dk/wordpress/(我正在谈论的缩略图是中间列中的缩略图)

有些人告诉我他们没有遇到这个问题。我已经在Linux上使用Opera,Chrome和Firefox进行了测试,并且所有这些浏览器都存在问题。

3 个答案:

答案 0 :(得分:2)

这是因为a元素是内联元素,因此它们不会使所有父元素的宽度可用。您可以将此规则添加到您的css:

#column-2 h2 a {
    display: block;
}

答案 1 :(得分:2)

我同意上面的评论,但为了使整个透明块可以点击,你还需要从h2中取出填充,然后将填充添加到标签中。

#column-2 h2 {
    padding: 0;
}

#column-2 h2 a {
    display: block;
    padding: 5px 4px;
}

答案 2 :(得分:1)

这只是因为a元素没有显示:默认为阻止。

只需添加这条小行:

#column-2 h2 a { display:block; }