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/

однако, они не могут быть ссылки (я не могу окружают с биркой). Как это сделать?

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/