當調整窗口大小時，HTML菜單元素會移動

Question

我正嘗試使用HTML和CSS創建菜單。菜單看起來不錯，但是當我重新大小的瀏覽器窗口，菜單項移動EG：

正常大小的窗口：

下面是CSS：

body{ 
    padding: 0px; 
    margin: 0px; 

} 

.logo{ 
    float: left; 
} 
#menubar{ 
    height: 90px; 
    background-color: red; 
    position: relative; 
} 
.mblinks{ 
    position: relative; 
    height: 90px; 
    text-align: center; 
} 
.mblinks li{ 
    display: inline; 
} 
.mblinks li a{ 
    padding: 16px 30px; 
    color: #fff; 
    text-decoration: none; 
} 

感謝您的幫助。

Answer 1

一些min-width添加到您的菜單欄

更改CSS如下

#menubar{ 
    height: 90px; 
    background-color: red; 
    min-width: 900px; /* Give the value as per your need*/ 
    position: relative; 
} 

Answer 2

這是因爲你的li s的設置爲.mblinks li{ display: inline; }。

這將使列表項目顯示爲文本，所以當然當窗口寬度被修改時，項目將移動以適應父母的範圍。

您可以通過使用position: absolute;來抵消這一點，但這也會將它們帶出文檔流程，並使它們更難以與其周圍的其他元素保持在一起。

請記住，此行爲是一個功能，而不是一個錯誤。

您可以在li上使用float: left;，但元素移動將大致相同。