如何對齊菜單項

Question

我只是在一個電子商務網站上工作，我正在嘗試使用來自 Codyhouse 的 CSS MEGA SITE NAVIGATION創建一個大型菜單。

除了二級菜單的水平對齊外，一切都很完美。

我試過定位列表但沒有用。 誰能指導我解決這個問題？

Answer 1

在這種情況下，問題是float: left; 將繼續嘗試在頁面向下移動時浮動，首先選擇最簡單的選項（第 6 列有空間，這就是它選擇那個選項的原因）。

因此，除了浮動之外，我還會指示第 8 列清除前 7 個項目中的每一個，無論它們的高度如何。

我看不到你的 HTML 結構是什么，但像這樣的東西應該可以解決問題。 替換li您正在使用的任何子元素。

li:nth-child(7n + 8){
  clear: both;
}

解釋一下：7n 是您在開始新行之前想要擁有的列數，8 是針對下一列，因為您希望這列清除第一行的所有子行。