部門對齊問題

我剛從網頁設計中斷了10年。我越來越接近了解div和in的屬性（那些在我的時代並不像現在那樣受歡迎）。現在我試圖得到這樣的佈局：部門對齊問題

Logo |圖標股利橫幅事業部鏈接事業部內容事業部頁腳股利

我此刻的問題爲中心鏈接事業部，這就是：

<div class="menu"> 
    <a class="link1" href="#">Home</a> 
    <a class="link2" href="#">About Us</a> 
    <a class="link3" href="#">Services</a> 
    <a class="link4" href="#">Portfolio</a> 
    <a class="link5" href="#">Contant Us</a> 
</div>

，我使用的CSS：

.menu 
    { 
     TO BE USED 
    } 

.menu a 
    { 
     display: block; 
     float: left; 
     line-height: 144px; 
     margin: 5px; 
     opacity: 0.3; 
     text-align: center; 
     width: 144px; 
    } 

.link1 
    { 
     background: #fdd22a; 
    } 

.link2 
    { 
     background: #009fe3; 
    } 

.link3 
    { 
     background: #574696; 
    } 
.link4 
    { 
     background: #ee7202; 
    } 
.link5 
    { 
     background: #e61c67; 
    } 
.link6 
    { 
     background: #96c11f; 
    }

下面是我在做什麼的示例：http://www.ragnarok.ws。

目前，我沒有足夠的鏈接（或知識）將鏈接與左右邊距（與徽標的左側和社交媒體圖標的右側對齊）對齊到點它看起來不是分散和愚蠢的，所以我想我的下一個最好的選擇是嘗試和中心鏈接的div。我連接的編碼也有點粗糙。我還沒有機會去清理。

任何建議，非常感謝。從.menu和.menu a和

來源

2015-05-19 Ralph Luciano Padro Jr.

在你的css中刪除float：left; – Elle

刪除float:left只需添加

margin: 0 auto;

到.menu使中心的鏈接。

此外，您display從block改變inline-block爲.menu a

記得給寬度爲.menu。我只是通過Inspect Element嘗試了一個寬度爲61%，它正確。

從block添加

text-align: center;

到.menu

，改變你的display到inline-block爲.menu a。

在此方法中不需要指定寬度爲.menu。可能是最簡單的解決方案。

來源

2015-05-19 17:35:28 Lal

謝謝，拉爾。你的第二個選項似乎是最容易配置的。我會去玩，但我想說，謝謝你。 –

@RalphLucianoPadroJr。好.. :)請問我是否有任何疑問..同時請標記答案爲接受，如果它幫助你.. – Lal

從Learn CSS Layout摘自：

.menu 
    { 
     width: 600px; 
     margin: 0 auto; 
    }

從設置一個塊級元素將阻止它的width伸出到其容器的左側和右側的邊緣。然後，您可以將左右邊距設置爲auto，以水平方向爲居中該容器內的元素。元素將佔用您指定的寬度，則剩餘空間將在兩個邊距之間均勻分配。

來源

2015-05-19 17:38:06

你能解釋*爲什麼這個工程。另外**的文檔鏈接**也是有用的。 – Mooseman

部門對齊問題

回答

相關問題