我试图将 anchor 元素与它上面的一些样式对齐，但结果一团糟而且对齐不正确，请在此处查看此插图
为此，我有这个结构
<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 & 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;}
所以基于上面的样式，它应该做什么，它应该将 anchor 标记向左对齐并且每边有 5px 的边距，每边有 8px 的填充，总共 3px 的边框半径边、文本阴影、17px 的字体大小、背景和字体颜色。除了应该帮助指定元素将其自身对齐到左侧的样式外，一切都有效，我在网上搜索但没有任何效果，我尝试使用这些样式但不幸的是没有任何效果所以我在这里寻找至少一个想法或建议如何正确对齐。
最佳答案
尝试position:absolute;让float:left;正常工作
关于html - anchor 元素没有正确对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18362262/