TIPS-XHTML下如何強制指定SPAN寬度
先前我寫過一篇KB，談過套用XHTML後，TextArea的Width光設定數字時無法生效，必須再註明px才可以。今天在處理SPAN時，又遇到同樣的問題! 以下的寫在如果不加第一列的<!DOCTYPE...>，可以顯示向左靠的Left及向右靠的Right文字。但若加了XHTML宣告，則Left與Right就會接連著擠在一起。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ><BODY>
<DIV style="WIDTH:305px;">
<DIV><SPAN style="width: 100px;">Left</SPAN>
<SPAN style="width: 200px; text-align:right">Right</SPAN></DIV>
</DIV>
</BODY></html>
Google了一下，找到一篇文章。原來在XHTML中，SPAN預設已經不能強制指定寬度了，而是完全由內含文字、元素的寬度決定。如果要指定寬度，可以利用style的display屬性，過去我只用過none隱藏元素，原來還有block、inline-block等值可以設定。設block時相當於DIV，會造成Left、Right不能排在同一列，因此inline-block是本案例的最佳選擇。改成以下的style宣告，就可以在XHTML中正常顯示囉!
<DIV><SPAN style="width: 100px; display: inline-block;">Left</SPAN>
<SPAN style="width: 200px; text-align:right; display: inline-block;">Right</SPAN></DIV>