【发布时间】：2013-08-21 15:58:02
【问题描述】：
我试图将锚元素与上面的一些样式对齐，但结果是一团糟并且没有正确对齐，请在此处查看此插图
为此，我有这个结构
<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;}
所以基于上面的样式，它应该做的是，它应该将锚标签向左对齐，并且每边有 5px 的边距，每边有 8px 的填充，总共 3px 的边框半径边，文字阴影，17px的字体大小，背景和字体颜色。除了应该帮助指定元素将其自身对齐到左侧的样式之外，一切都有效，我在网上搜索但没有任何效果，我尝试使用这些样式，但不幸的是没有任何效果，所以我在这里寻找至少有关的想法或建议如何正确对齐。
【问题讨论】：
-
“Archieves”拼写错误，应该是“Archives”
-
您在哪个浏览器和版本中看到它？在任何其他浏览器中都可以吗？此外，您在包含的 div 上有一个 clear 类。我认为这是一个尝试自我清除其孩子的课程。您能否添加 css 以清除并扩展至帖子。我怀疑还有其他一些 css 导致了您的问题中没有显示。
-
@DaveHaigh：请看我更新的帖子，我使用的是 chrome 版本 28.0.1500.71 m。
-
我无法在 Chrome 中复制它。如果您为复制的问题设置了一个 jsfiddle，那么有人可能能够有效地提供帮助
-
我在 ie10、firefox 28 上对其进行测试，结果都一样:(