如何在TopNavBar中使用CSS對齊鏈接？

我爲我正在處理的網站創建了響應式固定頂部導航欄。我自學CSS，截至目前，我只有2周的語言經驗。如何在TopNavBar中使用CSS對齊鏈接？

小提琴鏈接可以找到here。

/* BASIC STYLE START */ 

body { 
    margin: 0; 
    background-color: #FFFFFF; 
    font-family: 'Titillium Web', Arial, sans-serif; 
} 

/* BASIC STYLE END */ 





/* NAVIGATION BAR START */ 

ul.topnav { 
    margin: 0; 
    padding: 0; 
    background-color: #2F2E2E; 
    overflow: hidden; 
    list-style-type: none; 
    width: 100%; 
    position: fixed; 
    top: 0; 
} 

ul.topnav li { 
    margin: 0; 
    padding: 0; 
    float: left; 
} 

ul.topnav li a { 
    margin: 20px; 
    padding: 0; 
    color: #FFFFFF; 
    overflow: hidden; 
    display: block; 
    text-align: center; 
    text-decoration: none; 
    font-size: 10px; 
    font-weight: 400; 
    letter-spacing: 3px; 
    text-transform: uppercase; 
} 

ul.topnav li a:hover { 
    color: #B0AAA9; 
    transition: 0.3s; 
} 

ul.topnav li a.active { 
    color: #B0AAA9; 
} 

@media screen and (max-width: 800px){ 
    ul.topnav li.right, 
    ul.topnav li { 
     float: none; 
} 
} 

/* NAVIGATION BAR END */

我的問題是與對齊導航欄內的鏈接。我想相應地調整下面的內容。

效忠標題 - 導航欄首頁-FAQ鏈接左側 - 導航欄註冊&登錄鏈接的中心柱 - 的導航欄

我所面臨的問題是，我似乎無法真正右設法正確對齊它們。我想出瞭如何在HTML中更改類，並將註冊鏈接移動到右側，但我無法將主頁常見問題鏈接移動到中心。此外，當我在導航欄中更改填充/頁邊距中的值時，響應式移動菜單隨着各處鏈接（非居中）而改變。

我很感激任何幫助，因爲我對此很新。另外，如果我在樣式表中有冗餘代碼，請告訴我。

最終，我想創建這個導航欄位於頂部的3列視差滾動網站之一。我打算使用下載的模板，但沒有意義，因爲我不會學到任何東西。

來源

2016-11-22 Andrew Gaw

的問題是：

你不能有一個<div>直接內<ul>。這完全無效。
規則ul.topnav li.right, ul.topnav li與float: none;

你需要做的是什麼矛盾，創建此規則：

ul.topnav li {float: left;}

您應該所有設置。如果你需要視差滾動，它肯定需要JavaScript。

預覽

小提琴：https://jsfiddle.net/9go9x2ug/

來源

2016-11-22 16:38:21

對不起，我不完全理解你的評論。我對這個編碼事物真的很陌生。那麼你是說第一個問題是用HTML代碼，第二個問題是用CSS代碼？我知道我需要JS來進行視差滾動。當我打開小提琴鏈接並檢查響應式視圖時，導航欄不再堆疊。 –

@AndrewGaw感謝您的評論。你能解釋一下「堆疊」部分嗎？ –

@Pravenn Kumar - 感謝這裏的幫助。我的意思是，在我的瀏覽器中，當我縮小原始代碼中使用的原始代碼的大小時，導航欄保持最前端，但鏈接堆疊在另一個之上。例如，當屏幕小於我認爲的800px時，Allegiance標題鏈接位於頂部，其下的所有其他所有內容從左至右依次堆疊，如果有意義的話。所以效忠，家庭，節目等都在彼此之上。但是當我用你的小提琴時，鏈接停止堆疊並保持水平。而不是垂直堆疊。 –

如何在TopNavBar中使用CSS對齊鏈接？

回答

相關問題