锚元素没有正确对齐

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，背景和字体颜色。 Everthing工作除了应该帮助指定的元素自我左对齐的样式，我搜索网络，但没有任何作品，我尝试在风格上玩，但不幸的是没有任何作品所以我在这里寻找至少一个想法或建议如何正确对齐。

Answer 1

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

Answer 2

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

Answer 3

没关系，我有超过数百个样式代码，我无法逐个检查，所以我切换到另一个，我做的是将锚标签包装到div，然后用一个类圆圈命名div效果很好！谢谢大家的回答。

Answer 4

只是查看代码，我不完全确定何时将锚标记设置为display: block;和float: left;。您只需display: inline-block;即可，甚至不需要.clear或.extend。

CSS：

.circle{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    display: inline-block;
    margin: 5px;
    padding: 8px;
    vertical-align: top;
    background: #8c8b8b;
    color: #fff;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 17px;
    text-shadow: 1px 1px 1px #363232;
}

标记：

<div>
  <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>