0

我试图将锚元素与上面的一些样式对齐，但结果是一团糟，并且没有正确对齐，请在此处查看此插图

https://www.dropbox.com/s/x38gtiy1h711k2s/Untitled-1.jpg

为此，我有这个结构

<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，a文字阴影，字体大小为 17px，背景和字体颜色。除了应该帮助指定元素将其自身对齐到左侧的样式之外，一切都有效，我在网上搜索但没有任何效果，我尝试使用这些样式，但不幸的是没有任何效果，所以我在这里寻找至少有关的想法或建议如何正确对齐。

4

4 回答 4

0

只是查看您的代码，我不完全确定您何时将锚标记设置为display: block;and 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>
于 2013-08-21T19:39:17.123 回答
0

没关系，我有数百个样式代码，我不能一个一个地检查，所以我切换到替代一个，我所做的是将锚标签包装到一个 div，然后用一个类圆圈命名 div，它工作得很好！谢谢大家的回答。

于 2013-08-21T17:50:06.447 回答
0

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

于 2013-08-21T16:03:49.967 回答
0

努力position:absolute;使float:left;工作正常

于 2013-08-21T16:02:35.227 回答