導航在錯誤的順序顯示

Question

我已經證明，像這樣我的導航：顯示時就像是從底部責令時間，所以

#header-menu #navigation { 
    text-align: right; 
} 
#header-menu #navigation ul { 
    display: inline-block; 
} 
#header-menu #navigation ul li { 
    float: right; 
    margin: 10px; 
    display: flex; 
    align-items: center; 
    height: 80px; 
} 
#header-menu #navigation ul li a { 
    text-decoration: none; 
    color: white; 
    font-weight: 800; 
    font-size: 14pt; 
} 

<div id="navigation" class="col-xs-9"> 
    <ul> 
    <li><a href=""><span>Home</span></a> 
    </li> 
    <li><a href=""><span>about</span></a> 
    </li> 
    <li><a href=""><span>products</span></a> 
    </li> 
    <li><a href=""><span>blog</span></a> 
    </li> 
    <li><a href=""><span>contacts</span></a> 
    </li> 
    </ul> 
</div> 

但由於某些原因：

聯繫人博客公司介紹首頁...

我怎樣才能使它從上到下的正確順序。

乾杯

Answer 1

你設置的li元素的浮動，這意味着，無論第一個元素是，永遠是右邊的第一個。

試着改變你的CSS這樣的：

#header-menu #navigation { 
    text-align: right; 
} 
#header-menu #navigation ul { 
    display: inline-block; 
    float: right; 
} 
#header-menu #navigation ul li { 
    margin: 10px; 
    display: flex; 
    align-items: center; 
    height: 80px; 
} 
#header-menu #navigation ul li a { 
    text-decoration: none; 
    color: white; 
    font-weight: 800; 
    font-size: 14pt; 
}