Question

我一直在尝试使用CSS形状的div来充当链接。

我可以获得显示形状的div，链接标记也会被渲染，但我实际上无法获得链接标记来填充div以便说出来。

我有什么遗漏吗？

HTML code：

<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>

这些样式是否内联，以便您不必单独阅读这些类别。

Answer 1

为什么不使用不带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>

Answer 2

反过来说，锚需要包裹div：http://jsfiddle.net/H2J9a/2/

此外，您无需转义引号。

在你的情况下，边框正在推动div下方的锚点，因此你可以尝试使锚点绝对定位，使其浮动在div上方，或者将形状样式放在锚点本身上。请在此处查看：http://jsfiddle.net/H2J9a/6/。

这是具有形状样式的锚点的示例（虽然我保留了div，但这里不需要div）：

<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>

Answer 3

你根本不需要div

JsFiddle

<强> CSS

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

Answer 4

您可以尝试使用<a></a>而不是其他方式包装div。

这是 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>

CSS形状作为链接

4 个答案: