锚点元素未正确对齐

Question

我试图将锚点元素与其上的一些样式对齐，但它变得一团糟，而且没有正确对齐，请参阅此处的插图

​

​

为此，我有这样的结构

<p style="margin-top: 0 !important; text-align: center; padding: 0 !important;" align="center"><span style="font-size: x-large; color: #00ccff;">Our information technology consulting services include:</span></p>

<div class="extend clear">
<a class="circle" href="http://westchestercomputerconsulting.com/it-consulting-services">IT Consulting Services:</a>
<a class="circle" href="http://westchestercomputerconsulting.com/remote-support">Remote Support:</a>
<a class="circle" href="http://westchestercomputerconsulting.com/hosted-exchange">Hosted Exchange:</a>
<a class="circle" href="http://westchestercomputerconsulting.com/remote-backup-services">Remote Backup Services:</a>
<a class="circle" href="http://westchestercomputerconsulting.com/cloud-server-solutions">Cloud Server Solutions:</a>
<a class="circle" href="http://westchestercomputerconsulting.com/cloud-solutions">Cloud Solutions:</a>
<a class="circle" href="http://westchestercomputerconsulting.com/wi-fi-design-service-consultation">WiFi Design Service &amp; Consultation:</a>
<a class="circle" href="http://westchestercomputerconsulting.com/application-development">Application Development:</a>
<a class="circle" href="http://westchestercomputerconsulting.com/web-developments-and-design"> Web Development And Design:</a>
<a class="circle" href="http://westchestercomputerconsulting.com/document-management-solutions">Document Management Solutions:</a>
<a class="circle" href="http://westchestercomputerconsulting.com/network-design-and-implementation">Network Design And Implementation:</a>
<a class="circle" href="http://westchestercomputerconsulting.com/voip-pbx-services">VoIP Phone Services:</a>
</div>

以及上述结构的css。

.circle{
color: #fff;
padding: 8px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 17px;
text-shadow: 1px 1px 1px #363232;
background: #8c8b8b;
display: block;
float: left;
margin: 5px;
vertical-align: top;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.extend{max-width: 100%; max-height: 100%;}
.clear{float: none; clear: both;}

因此，基于上面的样式，它应该做的是，它应该左对齐锚定标签，并在每边有一个5px的边距，8px的每边一个填充，所有边的边框半径为3px，一个文本阴影，一个17px的字体大小，一个背景和一个字体颜色。除了帮助指定元素向左对齐的样式之外，所有的东西都可以工作，我在网页上搜索，但都没有工作，我试着使用样式，但不幸的是什么都没有工作，所以我在这里寻找至少一个关于如何正确对齐的想法或建议。

Answer 1

尝试使用position:absolute;使float:left;正常工作

Answer 2

尝试left:0px;和绝对定位position:absolute;

Answer 3

不要紧，我有超过数百个风格代码，我不能一个一个地检查，所以我切换到另一个，我所做的是把锚标签包装到一个div中，然后用一个类圆圈命名这个div，它工作得很好！感谢大家的回答。