錨元素犯規正確對齊

我試圖對準它的一些風格錨元素，但它出來是一個爛攤子，它不是對齊正確，請參閱本說明這裏錨元素犯規正確對齊

爲我有這樣的結構

<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對每一側的邊緣，在8像素的兩側，邊框半徑填充3px，文字陰影，字體大小爲17px，背景和字體顏色。除了應該幫助指定元素將它自我對齊到左側的樣式之外，Everthing的作品可以通過網絡搜索，但沒有任何效果，我試着在樣式上播放，但不幸的是沒有任何作用，所以我在這裏尋找至少一個想法或建議如何正確對齊。

來源

2013-08-21 Jacky lou

「Archieves」被拼寫錯了，應該是「檔案」 –

是你看到的是什麼瀏覽器和版本？在任何其他瀏覽器中都可以嗎？你也有一類明確的包含div。我認爲這是一個嘗試自我清除自己的孩子的班級。你可以添加清楚的CSS並擴展到帖子請。我懷疑還有一些其他的CSS導致了這個問題，你沒有在你的問題中顯示。 –

@DaveHaigh：請參閱我更新的帖子，即時通訊使用chrome版本28.0.1500.71米。 –

嘗試position:absolute;使float:left;正常工作

來源

2013-08-21 16:02:35 SaturnsEye

不工作或者 –

是什麼瀏覽器你？看它，因爲當我的jsfiddle查看它，它比你的樣本圖像 – SaturnsEye

IM看起來整潔使用Chrome版本28.0.1500.71米，也被檢查在Firefox 28和IE10，它也一樣。現在我懷疑，也許有元素或樣式與他指定的元素有衝突，所以我現在要檢查它 –

嘗試left:0px;和絕對定位position:absolute;

來源

2013-08-21 16:03:49

沒關係，我有數百種風格的代碼，我不能裸露逐一檢查，所以我切換到備選之一，我做的是將錨標籤包裝到一個div，然後用class circle命名div，它的效果很好！感謝大家的回答。

來源

2013-08-21 17:50:06

只是看看你的代碼，我不完全確定當你設置錨標記爲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>

來源

2013-08-21 19:39:17 Seed

錨元素犯規正確對齊

回答

相關問題