作为链接的CSS形状

我一直在试图让一个CSS形状的div作为链接。作为链接的CSS形状

我可以得到形状div来显示，链接标签也被渲染，但我不能真正得到链接标签，填补了DIV这么说。

有什么我失踪？

HTML代码：

<div style="width: 0px; 
height: 0px; 
border-left: 7px solid transparent; 
border-right: 7px solid transparent; 
border-top: 12px solid #d1e8ff; 
display: inline-block; 
vertical-align: middle;"> 
    <a href=\"{0}\" style=\"display:block; height:13px; width:12px; align:\"></a> 
</div>

做了内嵌样式，这样你就不必单独阅读classses。

来源

2014-03-03 Alexander Matusiak

为什么不是将所有样式应用于a本身？ – Neograph734

做它的其他方式轮，锚需要包装该div：http://jsfiddle.net/H2J9a/2/

另外，您不需要转义引号。

在你的情况下，边界正在推动在div下方的锚，所以你可以尝试使锚绝对定位的，因此浮在上面的股利，或将形状样式的锚本身。在这里看到：http://jsfiddle.net/H2J9a/6/。

这是具有形状样式锚的例子（股利是不必要在这里，虽然我一直是）：

<div style=""> 
    <a href="{0}" style="width: 0px; 
         height: 0px; 
         border-left: 7px solid transparent; 
         border-right: 7px solid transparent; 
         border-top: 12px solid #d1e8ff; 
         display: inline-block; 
         vertical-align: middle;"> 
    </a> 
</div>

来源

2014-03-03 20:03:34 Shomz

我后面使用.NET代码来绑定标签，因此逃脱。之前和之后还有其他div，所以我可能会采用这个，因为它更好地融合了页面的语法流。 –

我这么认为，只要确保你没有在输出HTML中。是的，你有很多选择来完成这项工作。 – Shomz

你可以尝试用周围<a></a>，而不是其他的方式包装的股利。

这里是一个fiddle

<a href="www.google.com" style="display:block; height:13px; width:12px; align:"><div style="width: 0px; 
    height: 0px; 
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent; 
    border-top: 12px solid #d1e8ff; 
    display: inline-block; 
    vertical-align: middle;"> 
</div> 

    </a>

来源

2014-03-03 20:00:55

请注意，这会根据W3C标准创建“无效”HTML。锚点内不能有块元素。 – Neograph734

我认为html5允许这种行为 – Huangism

看来我坚持旧标准，这确实在HTML5中是允许的。 http://html5doctor.com/block-level-links-in-html-5/ – Neograph734

为什么不直接使用锚而不DIV

http://jsfiddle.net/H2J9a/5/

<a href="#" style="width: 0px; 
    height: 0px; 
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent; 
    border-top: 12px solid #d1e8ff; 
    display: inline-block; 
    vertical-align: middle;"> 
</a>

来源

2014-03-03 20:02:55 Huangism

哈！这好多了。完全滑了我的脑海。 –

你根本就不

JsFiddle

需要一个div

CSS

a { 
    display:block; 
    height:0px; 
    width:0px; 
    border: 7px solid transparent; 
    border-top: 7px solid #d1e8ff; 
}

来源

2014-03-03 20:07:28

作为链接的CSS形状

回答

相关问题