頁腳中的鏈接對齊

我想克隆谷歌的主頁。我從頁面的頁腳開始，陷入了頁腳中鏈接的對齊。頁腳中的鏈接對齊

我的html代碼：

<div class="footer"> 
<hr > 
<footer > 
    <a href="" class="advertising">Advertising</a> 
    <a href="" class="business">Business</a> 
    <a href="" class="about">About</a> 
    <a href="" class="privacy">Privacy</a> 
    <a href="" class="terms">Terms</a> 
    <a href="" class="settings">Settings</a> 
</footer> 
</div>

我的CSS代碼：

.footer{ 
position: absolute; 
bottom: 0; 
left: 0; 
width: 100% 
} 

footer{ 
    background-color: #F4F6F7; 
    height: 45px; 



} 

hr{ 
    border-color: #CCD1D1; 
    margin-bottom: 0px; 
} 

.advertising, .business, .about, .privacy, .terms, .settings{ 
    color: #909497; 
    font-size: 1.2em; 
    margin-top: 11px;    //THIS LINE. 


} 

.advertising, .business, .about{ 
    margin-left: 40px; 
} 


.privacy, .terms, .settings{ 
    margin-right: 40px; 
    float: right; 

}

誰能告訴我，爲什麼行「的margin-top：11像素」不適用前3個鏈接頁腳（廣告，商業，關於）。頁腳的截圖： Screenshot of footer:

來源

2017-04-08 Arpit Banati

查看下面的答案。 – cosmoonot

您需要添加float:left到你的前三個鏈接，您已經在最後三個應用float:right。

.advertising, .business, .about{ 
    margin-left: 40px; 
    float:left; 
}

來源

2017-04-08 07:06:14 cosmoonot

'浮動：左'做了工作。謝謝。但我無法理解它背後的原因。爲什麼頂級利潤率取決於浮動資產？ –

@ArpitBanati請參閱這篇文章：https://www.sitepoint.com/web-foundations/floating-clearing-css/另外，給我一個投票。 – cosmoonot

我跑了通過codepen，它

我也建議使用Flexbox的，它的很多更容易使用，這裏是一個工作時，我使用的頁腳選擇應用的保證金11像素的所有元素示例

`http://codepen.io/HTMLanto/pen/gmNedQ`

乾杯！

來源

2017-04-08 07:39:11

雖然上面的答案會工作，更好的解決方案是這樣的：

.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100% 
 
} 
 

 
footer { 
 
    background-color: #F4F6F7; 
 
    height: 45px; 
 
} 
 

 
hr { 
 
    border-color: #CCD1D1; 
 
    margin-bottom: 0px; 
 
} 
 

 
.align-left { 
 
    float: left; 
 
} 
 

 
.align-right { 
 
    float: right; 
 
} 
 

 
.footer-links { 
 
    list-style-type: none; 
 
} 
 

 
.footer-links li { 
 
    display: inline; 
 
} 
 

 
.footer-links li a { 
 
    color: #909497; 
 
    font-size: 1.2em; 
 
    margin: 11px 20px 0px; 
 
}

<div class="footer"> 
 
    <hr/> 
 
    <footer> 
 
    <ul class="footer-links align-left"> 
 
     <li><a href="#">Advertising</a></li> 
 
     <li><a href="#">Business</a></li> 
 
     <li><a href="#">About</a></li> 
 
    </ul> 
 
    <ul class="footer-links align-right"> 
 
     <li><a href="#">Privacy</a></li> 
 
     <li><a href="#">Terms</a></li> 
 
     <li><a href="#">Settings</a></li> 
 
    </ul> 
 
    </footer> 
 
</div>

通過將鏈接到不同的菜單，它可以讓你非常快速地添加和刪除鏈接未來不會搞亂CSS類。

這可以修復您所遇到的任何邊距錯誤，因爲我們聲明每個錨標記都有11px的margin-top。你也會注意到，而不是有40px的餘裕和margin-right，我已經設置每邊20px，這將產生相同的效果。

您還可以在HTML中的其他地方使用.align-left和.align-right類，而不是在每個類的CSS中聲明它。

當他們都有相同的風格時，沒有必要給每個鏈接它自己的類。但是，如果你想突出顯示一個特定的鏈接，你自然只需要將一個.highlight類添加到其中一個定位標記中，並在CSS中指定樣式。

此方法還提供了完整的瀏覽器支持。當我寫這篇文章的時候，Flexbox對IE有些脾氣。

希望這會有所幫助！

來源

2017-04-08 10:32:00

頁腳中的鏈接對齊

回答

相關問題