浮動導航錨點而不反轉它們的順序？

-2

.topNav { 
 
    overflow: hidden; 
 
    background-color: #5e9da1; 
 
} 
 

 

 
/* Style the links inside the navigation bar */ 
 

 
.topNav a { 
 
    float: right; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 

 
/* Change the color of links on hover */ 
 

 
.topNav a:hover { 
 
    background-color: #ddd; 
 
    color: #000000; 
 
} 
 

 

 
/* Add a color to the active/current link */ 
 

 
.topNav a.active { 
 
    background-color: #4CAF50; 
 
    color: #ffffff; 
 
}

<div class="topNav"> 
 
    <a class="active" href="#home">Home</a> 
 
    <a href="#About">About</a> 
 
    <a href="#Gallery">Gallery</a> 
 
    <a href="#Contact">Contact</a> 
 
</div>

如何浮動錨點向右倒沒有他們之間的順序？

注：我能夠通過手動扭轉了HTML文件的錨點爲了解決這個問題，但我不知道這是一個妥善的解決辦法（好習慣）的問題：例子：

<a href="#Contact">Contact</a> 
    <a href="#Gallery">Gallery</a> 
    <a href="#About">About</a> 
    <a class="active" href="#Home">Home</a>

來源

2017-09-30 Thoughtful Mind

-1

一般來說，我建議不要使用浮動因爲這個和其他原因。我用了一個內聯塊代替，和比對的內容向右

.topNav { 
    overflow: hidden; 
    background-color: #5e9da1; 
    text-align: right; 
} 


.topNav a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-size: 17px;

}

下面是Codepen 修復 - https://codepen.io/anon/pen/MEvYYq

來源

2017-09-30 19:50:19

浮動導航錨點而不反轉它們的順序？

回答

相關問題