[英]HTML, CSS, may a circle be a link?
I successfully "rendered" circles in HTML: 我成功地“渲染”了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/ http://jsfiddle.net/6e9dE/
however, they cant be links (I cant surround with A tag). 但是,它们不能是链接(我不能用A标签包围)。 How to do it?
怎么做?
Why wrap them when you can simply make them an anchor? 当您只需使它们成为锚点时,为什么还要包裹它们?
<a href="http://stackoverflow.com"
class="articleBoxCircleInner"></a>
If you insist, you can still wrap them (I don't see why you didn't succeed earlier). 如果您坚持,您仍然可以将它们包装起来(我不明白为什么您之前没有成功)。
<a href="http://stackoverflow.com">
<div class="articleBoxCircleInner"></div>
</a>
HTML: HTML:
<div class="articleBoxCircleInner"><a href="#"></a></div>
<div class="articleBoxCircleInner"><a href="#"></a></div>
<div class="articleBoxCircleInner"><a href="#"></a></div>
CSS: 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%;
}
If you have a block containing a float (which is what happens if you wrap your <div>
in a link, the block won't expand its height to include the floated item by default. One quick fix is to add an overflow
to the container, like this: 如果你有含有浮标(这是如果你换行会发生什么阻止你
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.