武林網(www.49028c.com)文章簡介：YUI中有一種布局思想：柵格決定寬度，內容決定高度，今天討論的是自適應寬度的輸入框.

YUI中有一種布局思想：柵格決定寬度，內容決定高度，今天討論的是自適應寬度的輸入框，先上代碼：

簡單說一下原理：

為了有較好的體驗，input[type='text']及textarea一般會有border值及padding值（鄙視某些padding設為0滴淫兒），利用如下公式：

讓輸入框繼承fluid-input-inner的寬度即可實現自適應；而IE6有個寬度超出自動撐開的bug，故再多套一層fluid-input，寬度100%，溢出隱藏即可。

col寬度隨意，在寬度自適應布局中默認為auto，這里方便演示定了寬度。

這里由內而外解說，不過命名是由外而內的。

更進一步

focus時border變為4px咋整？

問的好（其實是偶自己在問），輸入框focus后增加class=”focus”，即變為：

CSS:

———————— 鄉民問答分隔線 ————————-

美女@jeannewoo反饋了個bug，IE6下textarea輸入文字的時候就自己撐開了（昨晚下班路上@ivane也跟我說過，不過我沒當回事，嘿~），我試了一下果真如此，解決方法很簡單：觸發fluid-input-inner的hasLayout即可。