HTML，CSS，可能是圆圈吗？

Question

我成功地“渲染”了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演示1

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

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

jsFiddle演示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/