編寫元素的CSS來包裝

我已經嘗試了一百個不同的組合，用於我的菜單欄（二級菜單），以在較小的瀏覽器屏幕或設備中查看時包裝成兩行。編寫元素的CSS來包裝

最後一個我想是這樣的：

@viewport { 
width: device-width; 

@media only screen and (min-width : 375px) and (max-width : 667px) { 
    .secondary-menu { 
     display: flex; 
     flex-direction: row; 
     flex-wrap: wrap; 
    } 
}

有人可以幫我解決這個問題的代碼或寫一個又一個，可自動顯示與一個小屏幕上的所有按鈕上方的綠色菜單欄上的兩行？（我的網站的其餘部分是響應式的，所以我不需要爲整個網站做這個工作，只是這個元素。）

來源

2016-07-07 trying to create my website

http://stackoverflow.com/a/37844240/3597276 –

尋求調試幫助的問題（「爲什麼這個代碼不工作？」）必須包含所需的行爲，特定的問題或錯誤以及必需的最短代碼在問題本身**中重現**。沒有明確問題陳述的問題對其他讀者無益。請參閱：[如何創建最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。 – Pete

嗨。這只是爲了指出你希望的正確方向。嘗試使用固定位置，空白空白和顯示。。secondary-menu ul {height：35px; height：35px; /* position：fixed; */ top：0; background-color：＃0e6e3e; margin：0 -9999rem; padding：.25rem 9999rem; /* white-space：nowrap; */ 溢出：隱藏; display：inline; }請注意，我評論了位置固定和白色空間nowrap。 – Vcasso

-2

你應該首先將「height：auto」添加到你的「.secondary-menu ul」類定義。

就應該添加「浮動：左」，以目前的樣式表類，因此該類最終會是這樣的：

.boldgrid-framework-menu li, .footer-center-menu li { 
    list-style: none; 
    display: inline; 
    list-style-type: none; 
    float: left; 
}

現在，當我擴展您的網站，該按鈕會自動出現在另一行。

來源

2016-07-07 14:15:34

非常感謝你解決了這個問題。 –

如果我想有一個第三級按鈕的條件，你是否推薦.boldgrid-framework-menu li，。第三方菜單{ \t color：orange;}？ –

編寫元素的CSS來包裝

回答

相關問題