CSS, CSS2, 網頁設計

CSS教學-清除ul li繼承設定值並讓li居中

梅干2010/04/26
梅問題-CSS教學-Div使用多重ul li清除繼承與li居中
  梅干最近將首頁作了點小改版,卻遇到一個怪現象,由於ul li預設就是個區塊,若要把區塊取消時,只要將display設為inline就可以,但梅干下方在一個Div中用了多個ul li,且第一組的ul li設了width、height,到了版尾的地方,希望讓其它的服務選項居中,並將版尾的ul li的display:inline,卻發現完全沒反應,且還繼承第一個ul li設定,搞了半天終於找到原因,也讓ul li可以依父層的Div寬度居中。

CSS設定:
#mainDiv{width:500px; text-align:center; border:solid 1px red;}
#mainDiv ul{clear:both; margin:0; padding:0;}
#mainDiv ul li{
width:80px;
height:80px;
border:solid 1px #ccc;
float:left;
margin-left:5px;
margin-bottom:5px;
list-style-type: none;
}

#mainDiv .subDiv ul li{
width:inherit;
height:inherit; 
float:none; 
border:0; 
display:inline;
}

Html設定:
<div id="mainDiv">
    <ul>
        <li>Mainbody-title01</li>
        <li>Mainbody-title02</li>
        <li>Mainbody-title03</li>
        <li>Mainbody-title04</li>
    </ul>
    <div class="subDiv">
        <ul>
            <li>subbdoy title01</li>
            <li>subbdoy title02</li>
            <li>subbdoy title03</li>
        </ul>
    </div>
</div>

  從html中可看到,在mainDiv中用了二個ul li,第一個ul li設定了區塊的大小,以及浮動靠齊,當subDiv中的ul li設了display:inline;,依然還是會發現,subDiv的ul li還是繼承第一個的設定,所以這邊梅干則將width、height設為inherit,float:none,用意就是將先前ul l的i屬性設定歸零,這時哈~ul li就可居中啦!呼!害梅干搞半天~XD!
【範例預覽】
UAG軍規iPhone防摔殼