先前我寫過一篇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>


Comments

# by QQ

好!

Post a comment