在解決ul居中問題時想到的幾點_經驗交流

最近在做網站的時候碰到了一個問題：我用 ul 標籤和 li 標籤構建的導航欄想要在不確定 li 數量和 li, ul 寬度的情況下居中，但是給 ul 使用了 text-align:center 之後卻沒有起到應有的效果。

原來的頁面架構是：

複製程式碼 程式碼如下:

 
  

 
    
• Firede
 
    
• Style5
 
  

 

 

樣式表結構為：

複製程式碼 程式碼如下:

 

這個樣本來也是沒有什麼問題的，但是因為要實現一個功能卻定義了一個ID（menu）和兩個CLASS（menu_ul, menu_li），這樣CSS文件就臃腫了。

我之所以搞不定 ul 居中的問題，就是因為 CSS 寫的太亂太多，到最後一環套一環，自己都糊塗了，定義結構的代碼混雜在各種為了顯示效果而寫的程式碼之中，於是便寫亂了。

在大腦發暈的情況下，不想修改了，於是重新寫了實現以上功能的程式碼，頁面結構：

複製程式碼代碼如下:

 
  

 
    
• Firede
 
    
• Style5
 
  

 

 

完整的樣式表：

複製程式碼 程式碼如下:

 

像這樣，很簡單的就解決了 ul 不能居中的問題。回頭檢查我的程式碼，原來是因為在 li 的樣式裡多加了一句 float:left，因為定義的 display 並不是 block，而是 inline，所以並不能浮動，造成了衝突，最終導致 ul 無法居中顯示。

總結一下，在寫網頁結構的時候，最好是同一個功能模組使用相對統一的CSS名稱。如果可以定義一個樣式名解決問題的，盡量不要定義多個，程式碼也要盡量簡潔。因為程式碼臃腫了就很容易出問題，很難發現錯誤在什麼地方。多用些像 menu, menu ul, menu li, menu a, menu a:hover 這種一系列的樣式，而不是定義一些像 menu, menu_ul, menu_ul_li這樣看似調理清晰、層次鮮明，但是實際上很混亂的混亂的名稱。

習慣是以往經驗在潛意識中總結出的精華，但是隨著技術的進步，很多以往的習慣都成為進一步提高的阻礙，這時候就要多參考一下標準了，看看以往的習慣是不是值得堅持下去。做網站也一樣，標準是能夠提高效率、改善效能並且指明方向的，Web標準化的設計更有助於我們提高維護網站的效率。