Question

我有一个包含大量链接的表。链接不包含文本，而是使用css属性content来定义链接的外观（在这种情况下，链接包含facebook，instagram和twitter的符号）。到目前为止它看起来应该如此，但我无法点击它们。我想避免使用 ，那我该怎么办？

这是我的HTML：

<table style="width: 100%">
    <tbody>
        <tr>
            <td class="fblink">
                    <a href="http://www.facebook.com/ladygaga" target="_blank"></a>
           </td>
            <td class="twlink">
                <a href="http://twitter.com/LadyGaga" target="_blank"></a>
           </td>
            <td class="iglink">
                <a href="http://instagram.com/ladygaga" target="_blank"></a>
            </td>
         </tr>  
    </tbody>
</table>

我的CSS：

table{
   border-collapse: seperate;
   border-spacing: 10px 0;
}

.fblink{
   background: blue;
}
.fblink:before{ 
   content:'\f30c';
}


.twlink{
   background: lightblue;
 }
.twlink:before{ 
   content:'\f309';
 }

.iglink{
   background: red;

 }
.iglink:before{ 
   content:'\f32d';
 }

有人可以帮帮我吗？我为它创建了一个小提琴http://jsfiddle.net/Qf99d/

提前致谢

Answer 1

你是在错误的地方添加伪元素......它们应该在锚链接内而不是表格单元格

JSfiddle

<强> CSS

table{
    border-collapse: seperate;
    border-spacing: 10px 0;
}
tr td a  {
    display: block;
    text-decoration: none;
    width:100%; /* make anchor full widths */
}
a:before {
    color:white;

}

.fblink{
    background: blue;
}
.fblink a:before{   
    content:'\f30c'; /* now inside anchor */
}


.twlink{
    background: lightblue;
}
.twlink a:before{   
    content:'\f309';
}

.iglink{
    background: red;

}
.iglink a:before{   
    content:'\f32d';
}

Answer 2

您必须在链接标记中添加内容，例如，您可以在链接中添加图标标记，如下所示：

<td>
                    <a href="http://www.facebook.com/ladygaga" target="_blank"><i class="fblink"></i></a>
           </td>

Answer 3

不要忘记：使用table元素进行布局被认为是一种不好的做法。使用CSS进行布局。

如果你想让整个表格单元格可以点击而不改变你的标记，你可以选择这样的东西：

http://jsfiddle.net/Qf99d/8/

CSS：

table{
    border-collapse: seperate;
    border-spacing: 10px 0;
}

.fblink a, .twlink a, .iglink a  {
    display: inline-block;    
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.fblink{
    background: blue;
}
.fblink a:before{   
    content:'\f30c';    
}

.twlink{
    background: lightblue;
}

.twlink a:before{   
    content:'\f309';
}

.iglink{
    background: red;

}
.iglink a:before{   
    content:'\f32d';
}

Answer 4

只需在<a>括号中插入您想要点击的图像。

Answer 5

如果您不想使用任何<a>，可以在<img>标记中插入虚拟DIV：

<a href="http://www.facebook.com/ladygaga" target="_blank"><div style="width:1em; height:1em; display:inline-block"></div></a>

Answer 6

以下是值得一提的相关附注：如果您正在考虑使用没有可描述文本的<a>标记作为其内容（如图像或图标），那么您必须牢记可访问性。我建议您添加title属性或aria-label属性。更多信息：https://dequeuniversity.com/rules/axe/1.1/link-name

Answer 7

使用CSS将锚标记的宽度设置为其父标记的大小，即display：block;整个表格单元格可以点击。

Answer 8

将锚点的宽度和高度设置为背景图像的相同宽度和高度。除非被覆盖，否则锚的大小根据其内容（其中没有）。

我检查了你的小提琴。确保Anchor的大小，而不仅仅是包含TD。

Answer 9

有两种方法我知道如何做到这一点。如上所列，您可以在a标签内设置图像，也可以执行图像映射。就个人而言，我只想把这样的链接。

<a href="http://www.facebook.com/ladygaga" target="_blank"><img src="File Here" /></a>

等等。希望这会有所帮助。

Answer 10

如果您无需点击，就不能指望href重定向您。

您可以在页面加载后使用jQuery，如下所示：

<script>
$(function() {
  $("#theHref").html("\f30c");
});
</script>

Answer 11

在这样的链接标签之间使用几个（空格字符）

<a href="http://www.facebook.com/ladygaga" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;</a>

如何制作<a href=""> clickable without text</a>

11 个答案: