HTML
<div id="status-buttons" class="text-center">
<a href="/1"><span>1</span></a>
<a href="/2"><span>2</span></a>
<a href="/3"><span>3</span></a>
</div>
CSS
#status-buttons a {
display:inline-block;
font-size: 22px;
margin-right: 20px; }
#status-buttons a span {
color: white;
line-height: 60px;
padding-top: 5px;
}
#status-buttons a.active span {
background: #00BC8C; }
.circle, #status-buttons a {
width: 56px;
height: 56px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
background: #5dc5c5;
margin-right: 10px;
text-align:center;
}
尝试的圆。就像在图像中,我被卡在圆圈之间的线条上。尝试添加边框底部,它不会出现。不认为div中的宽度可以用于行?有没有什么办法可以解决这个问题,所以当点击圆圈上的不同链接时,圆圈和它的线条会有活动的类别?
另一个问题:假设,链接带我们到不同的形式不同的页面,是否有可能使圆活跃?只有我能想到的方法是在每个页面中使圆圈活动,因此,如果单击任何链接页面,例如单击#2,它将显示1个和2个活动的圆圈。这可能是一个骗子。还有其他更好的方法吗?
帮助赞赏。
如何:http://jsfiddle.net/zyvke8sy/它有点限制,因为伪elemement有一个固定宽度的事实... – Sam 2014-10-16 16:22:38