欢乐颂小说在线阅读,完美的世界 1993 电影,玄幻小说

最近在做網(wǎng)站的時候碰到了一個問題：我用 ul 標(biāo)簽和 li 標(biāo)簽構(gòu)建的導(dǎo)航欄想要在不確定 li 數(shù)量和 li, ul 寬度的情況下居中，但是給 ul 使用了 text-align:center 之后卻沒有起到應(yīng)有的效果。

原來的頁面結(jié)構(gòu)是：

復(fù)制代碼代碼如下:

div id="menu">  
  ul class="menu_ul">  
    li class="menu_li">a href="#">Firede/a>/li>  
    li class="menu_li">a href="#">Style5/a>/li>  
  /ul>  
/div> 

樣式表結(jié)構(gòu)是：

復(fù)制代碼代碼如下:

style>  
#menu{...}  
.menu_ul{...}  
.menu_li{...}  
/style> 

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

我之所以搞不定 ul 居中的問題，就是因為 CSS 寫的太亂太多，到最后一環(huán)套一環(huán)，自己都糊涂了，定義結(jié)構(gòu)的代碼混雜在各種為了顯示效果而寫的代碼之中，于是便寫亂了。

在大腦發(fā)暈的情況下，不想修改了，于是重新寫了實現(xiàn)以上功能的代碼，頁面結(jié)構(gòu)：

復(fù)制代碼代碼如下:

div id="menu">  
  ul>  
    li>a href="#">Firede/a>/li>  
    li>a href="#">Style5/a>/li>  
  /ul>  
/div> 

完整的樣式表：

復(fù)制代碼代碼如下:

style>  
#menu {text-align:center;}  
#menu ul {padding:0;margin:0;}  
#menu li {display:inline;padding:0 10px;}  
/style> 

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

總結(jié)一下，在寫網(wǎng)頁結(jié)構(gòu)的時候，最好同一個功能模塊使用相對統(tǒng)一的CSS名。如果可以定義一個樣式名解決問題的，盡量不要定義多個，代碼也要盡量簡潔。因為代碼臃腫了就很容易出問題，并且很難發(fā)現(xiàn)錯誤在什么地方。多用些像 menu, menu ul, menu li, menu a, menu a:hover 這種一系列的樣式，而不是定義一些像 menu, menu_ul, menu_ul_li 這樣看似調(diào)理清晰、層次鮮明，但是實際上很混亂的名稱。

習(xí)慣是以往經(jīng)驗在潛意識中總結(jié)出的精華，但是隨著技術(shù)的進步，很多以往的習(xí)慣都成為進一步提高的阻礙，這時候就要多參考一下標(biāo)準(zhǔn)了，看看以往的習(xí)慣是不是值得堅持下去。做網(wǎng)站也一樣，標(biāo)準(zhǔn)是能夠提高效率、改善性能并且指明方向的，Web標(biāo)準(zhǔn)化的設(shè)計更有助于我們提高維護網(wǎng)站的效率。

標(biāo)簽：昭通玉樹濰坊大同石家莊深圳濰坊商洛

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《在解決ul居中問題時想到的幾點》，本文關(guān)鍵詞在,解決,居中,問題,時,想到,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

濮阳杆衣贸易有限公司

在解決ul居中問題時想到的幾點