[匯入]當css遇到xhtml–從display:inline到float:left

幾天前，寫了一個tab control ，風格如下：

我使用了css來描述這個風格，html和css代碼如下：

 <ul><li><a href="#" class="selected">檔案</a></li><li><a href="#">編輯</a></li><li><a href="#">視圖</a></li><li><a href="#">網站</a></li><li><a href="#">編譯</a></li><li><a href="#">工具</a></li></ul>

ul{border-bottom:solid 1px #999999;border-left:solid 1px #999999;height:30px;width:100%;margin-left:0px;}li{border-top:solid 1px #999999;border-bottom:solid 0px #999999;border-left:solid 1px #999999;border-right:solid 1px #999999;background-color:#cccccc;width:100px;height:30px;display:inline;list-style-type:none;margin-left:-1px;margin-bottom:-2px;text-align:center;padding-top:10px;}.selected{border-top:solid 1px #999999;border-bottom:solid 0px #999999;border-left:solid 1px #999999;border-right:solid 1px #999999;background-color:#eaeaea;width:100px;height:30px;display:inline;list-style-type:none;margin-left:-1px;margin-bottom:-2px;text-align:center;padding-top:10px;}

在一個master page上使用沒有任何問題。下午，在將這個tab control 拖到一個vs2005產生的頁面上，啟動並執行時候，發現效果竟然變成這個樣子：

同樣一段代碼，同樣的瀏覽器，怎麼會出現不同的效果？ 仔細檢查後，發現原來在master page裡之所以正常是因為master page使用的是html4.0，而現在的新的頁面是使用xhtml1.0來定義，難道是由於xhtml的嚴格定義要求引起的？ 趕快去w3c以及其他資源網站查資料，最後終於發現根本的原因。

原來，以前的寫法一直都是錯誤的。由於預設情況下，“li” 元素一直是豎直排列的，所以，我就使用了 display:inline 強制讓它在行的方向排列，以達到我想要的效果，但是，在xhtml裡，這種不嚴謹的寫法是不被支援的，所以，這裡設定高度、寬度都沒有任何作用。在格式化xhtml標籤時，更加強化了 “box”的概念，要想使用一些margin,padding等填充效果，就必須先將元素轉變成 box 元素，然後就可以設定想要的效果了。那麼，如何將一個元素轉變成 box 元素？ 答案是: 可以使用 float:left/right 的方式來把元素漂浮起來，變成一個個的box，這樣就可以任意使用 box 元素支援的css屬性了。

基於以上的思路，我將上面css裡的display:inline修改掉，變成float:left，一切都ok了！

以上只是一個特例，在html4.0轉到xhtml的過程中，會有不少的css效果都會發生轉變，不過，這種轉變是有規律和準則的，只要掌握了這種思想，應該能解決大部分問題。

文章來源:http://community.hf-mstc.org/cs/blogs/shakewang/archive/2006/06/18/2793.aspx