Question

我成功地'＃34;渲染＆＃34; HTML中的圆圈：

.articleBoxCircleInner
{
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    width: 14px;
    height: 14px;
    background-color: #707678;
    float: left;
    margin-right: 10px;
}

<div class="articleBoxCircleInner"></div>
<div class="articleBoxCircleInner"></div>
<div class="articleBoxCircleInner"></div>

http://jsfiddle.net/6e9dE/

然而，它们不能成为链接（我不能用A标签环绕）。怎么做？

Answer 1

为什么在你可以简单地将它们作为锚点时将它们包起来？

<a href="http://stackoverflow.com"
    class="articleBoxCircleInner"></a>

jsFiddle Demo 1

如果你坚持，你仍然可以包装它们（我不明白为什么你们之前没有成功）。

<a href="http://stackoverflow.com">
    <div class="articleBoxCircleInner"></div>
</a>

jsFiddle Demo 2

Answer 2

像这样：的 FIDDLE

HTML：

<div class="articleBoxCircleInner"><a href="#"></a></div> <div class="articleBoxCircleInner"><a href="#"></a></div> <div class="articleBoxCircleInner"><a href="#"></a></div>

CSS：

.articleBoxCircleInner { -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; width: 14px; height: 14px; background-color: #707678; float: left; margin-right: 10px; } .articleBoxCircleInner a{ display:block; height:100%; width:100%; }

Answer 3

如果你有一个包含浮点数的块（如果你将<div>包裹在一个链接中就会发生这种情况，那么该块在默认情况下不会扩展其高度以包含浮动项。一个快速解决方法是向容器添加overflow，如下所示：

.articleBoxCircleInner
{
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    width: 14px;
    height: 14px;
    background-color: #707678;
    float: left;
    margin-right: 10px;
}

a {
    overflow: auto;
}

<a href="http://jsfiddle.net/6e9dE/"><div class="articleBoxCircleInner"></div></a>
<div class="articleBoxCircleInner"></div>
<div class="articleBoxCircleInner"></div>

http://jsfiddle.net/KquSh/

HTML，CSS，圈子可能是一个链接？

3 个答案: