Question

我在网页上使用Facebook和Google+评论小部件。由于页面是响应式的，当页面收缩低于767px时，标签标题将消失，图标将保留。这使我将链接放在图标而不是标签上。我无法弄清楚如何让标题消失并让链接保留在选项卡上。有人可以帮忙吗？

HTML：

<ul>
     <li><a href="#tabs-1"><img src="/images/icon-facebook.png" alt="Facebook Icon" /><p class="tabTitle">Comment on <strong class="fbBlue">Facebook</strong></p></a></li>
     <li><a href="#tabs-2"><img src="/images/icon-plus.png" alt="Google+ Icon" /><p class="tabTitle">Comment on <strong class="googleRed">Google+</strong></p></a></li>
</ul>

CSS：

#tabs li{
    font-size: .875em;
    width: 48%;
    margin: 0 1%;
}
@media (max-width: 767px){
.tabTitle{
        display: none;
    }

    #tabs-1{
        width: 80%;
    }

    #tabs-2{
        width: 80%;
}

.g-comments{
    width: 90%;
    }
}

Answer 1

使用了etiquete正确的元视口：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

这些代码是正确的：

@media only screen and (max-width: 767px) {
    ul li p {
        display: none;
    }
}

示例：http://jsfiddle.net/Aua95/

将相同的链接放置两次

1 个答案: