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/