導航欄和液體設計

Question

在我的新網站上，我非常關注使用液體佈局。但是，我似乎無法獲得正確的導航欄。目前我正在使用浮動列表構建的水平導航欄。我有兩個按鈕向左和向右漂移幾個。現在我的問題是，一旦窗口寬度變得太小，一些按鈕跳轉到文檔中的下一行。我想避免的東西或至少使看起來很好。有任何想法嗎？

Answer 1

沒有看到一個例子，我想說你應該開始使用媒體查詢。找到瀏覽器的寬度，在該菜單中休息，然後添加到您的CSS：

@media all and (max-width: ???px) { 
    #yournavbar { 
     /* some styles here that change your navbar /* 

    } 
} 

這樣的話，你就不必樣式導航欄，使其總是的工作方式相同，仍然看起來好，但是你可以根據情況改變下面（或上面）某個特定區域的樣式，以便它開始表現不同。

Answer 2

固定寬度的導航欄中的li元素？如果是，他們周圍的包裝需要有一個固定的寬度，等於增加的邊距和邊距，這將防止浮動下降。

另一種選擇是在整個佈局上使用最小寬度來強制滾動條，這也會阻止浮動下降。