2010-05-04 72 views
0

我已經給了一個平面設計師的設計,我正在嘗試將其設置爲HTML和CSS。CSS - 垂直對齊文本,其中文本可以是多行

我面臨的問題之一是用戶輸入表單。在設計中,每個輸入的標籤都是固定的寬度 - 比如說100px。每個標籤/輸入對的容器固定在2em。我收到的設計要求每個標籤的文字都是垂直對齊的。因此,結構是這樣的:

<containerTag> 
    <label /> 
    <input /> 
</containerTag> 

只要文本是在一行(我剛使用2em的的行高度和容器匹配)沒有問題,但一些在標籤上的文字正在包裝成兩條甚至是兩條線。

有沒有一種語義和很好的方法來解決這個問題?

我需要能夠在IE6-9,Firefox 3.5+,Chrome和Safari中工作的東西。儘管我正在使用漸進式增強功能,但如果有一種解決方案只適用於以後的瀏覽器,但不會破壞較舊的解決方案,那麼這是可以接受的。

任何幫助感激地收到!

感謝您的時間
小號

回答

1

你的意思是......優雅降級? :P

將標籤的空白CSS屬性設置爲「nowrap」。

+0

是的我的意思是優雅的退化!衛生署! 不能設置空白屬性,就好像我這樣做的文本似乎落後於輸入(儘管實際上它只是在100px後切斷)。 文本仍然需要打包,但標籤中的一行,兩行或三行文本會垂直對齊。 – Sniffer 2010-05-04 11:49:54