可能大家在寫CSS導航的時候遇到過這個問題:導航欄里的按鈕太多了,一排放不下,就被擠到了第二行。這種情況不免讓人感到不太美觀。那么,該怎么辦呢?
首先,我們要明確一點:當導航按鈕被擠到第二行的時候,我們需要調(diào)整的是父元素的樣式,而不是按鈕本身的樣式。
下面,我來給大家演示一下該如何做。
.nav { display: flex; // 父元素使用flex布局 flex-wrap: wrap; // 自動換行 justify-content: center; // 讓子元素居中 } .nav button { // 給按鈕設(shè)置一些基礎(chǔ)樣式,比如邊距、顏色等等 }
這樣,當導航按鈕被擠到第二行的時候,它們就會自動換行,排列在第二行了。同時,我們通過設(shè)置justify-content: center;
讓子元素居中,這樣就不會顯得很亂。
總結(jié)一下,當導航按鈕被擠到第二行的時候,我們需要通過設(shè)置父元素的樣式來進行調(diào)整,采用flex布局,并設(shè)置flex-wrap: wrap;
和justify-content: center;
即可。