# Foundation 輸入框尺寸  使用網格的列來設置輸入框的大小，如 `.large-6`, `.medium-6`, 等。 更多網格系統知識，可以點擊 [網格系統](foundation-grid-system.html) 教程。 ### 實例 ``` <form> ? <div class="row"> ??? <div class="large-10 medium-7 columns"> ????? <label>large-10 medium-7 (100% on small) ????? ? <input type="text" placeholder="Name"> ????? </label> ??? </div> ? </div> ? <div class="row"> ??? <div class="small-5 columns"> ????? <label>small-5 ??????? <input type="text" placeholder="Name"> ????? </label> ??? </div> ? </div> ? <div class="row"> ??? <div class="medium-3 columns"> ????? <label>medium-3 (100% on small) ??????? <input type="text" placeholder="Name"> ????? </label> ??? </div> ? </div> </form> ``` ## 相等大小列 以下演示了相等大小列的實例: ### 實例 ``` <form> ? <div class="row"> ??? <div class="medium-4 columns"> ????? <label>medium-4 (100% on small, stacked) ??????? <input type="text" placeholder="Name"> ????? </label> ??? </div> ??? <div class="medium-4 columns"> ????? <label>medium-4 (100% on small, stacked) ??????? <input type="text" placeholder="Name"> ????? </label> ??? </div> ??? <div class="medium-4 columns"> ????? <label>medium-4 (100% on small, stacked) ??????? <input type="text" placeholder="Name"> ????? </label> ??? </div> ? </div> </form> ``` ## 內聯標簽 如果你希望你的標簽內容顯示在左邊（不是上邊），可以將標簽元素 label 放在輸入框左邊的不同的列上，并使用 `.inline` 類來設置垂直居中: ### 實例 ``` <form> ? <div class="row"> ??? <div class="small-8"> ????? <div class="row"> ????? ? <div class="small-3 columns"> ??????? ? <label for="name" class="inline right">Name</label> ??????? </div> ??????? <div class="small-9 columns"> ??????? ? <input type="text" id="name" placeholder="First Name.."> ??????? </div> ????? </div> ??? </div> ? </div> </form> ``` ## 前置和后置標簽 你可以在 `&lt;div class="row collapse"&gt;` 中添加前置和后置標簽，元素為： `&lt;_element_ class="postfix"&gt;` 或 `&lt;_element_ class="prefix"&gt;`。可以使用網格系統來設置前置和后置標簽的大小： ### 實例 ``` <form> ? <div class="row"> ??? <div class="large-6 columns"> ????? <div class="row collapse prefix-radius"> ????? ? <div class="small-3 columns"> ??????? ? <span class="prefix">Prefix</span> ??????? </div> ??????? <div class="small-9 columns"> ??????? ? <input type="text" placeholder="Value"> ??????? </div> ????? </div> ??? </div> ??? <div class="large-6 columns"> ??? ? <div class="row collapse postfix-radius"> ????? ? <div class="small-9 columns"> ????? ??? <input type="text" placeholder="Value"> ????? ? </div> ????? ? <div class="small-3 columns"> ????? ??? <span class="postfix">Postfix</span> ????? ? </div> ????? </div> ??? </div> ? </div> </form> ``` ### 前置和后置標簽按鈕 可以使用 `&lt;a&gt;` 元素添加 `.button` 類來設置前置和后置按鈕: ### 實例 ``` <a href="#" class="postfix button">Go</a> ``` ### 前置和后置標簽圓角按鈕 ### 實例 ``` <form> ? <div class="row"> ??? <div class="large-6 columns"> ????? <div class="row collapse prefix-radius"> ??????? <div class="small-3 columns"> ????????? <span class="prefix">Prefix</span> ??????? </div> ??????? <div class="small-9 columns"> ????????? <input type="text" placeholder="Value"> ??????? </div> ????? </div> ??? </div> ??? <div class="large-6 columns"> ????? <div class="row collapse postfix-radius"> ??????? <div class="small-9 columns"> ????????? <input type="text" placeholder="Value"> ??????? </div> ??????? <div class="small-3 columns"> ????????? <span class="postfix">Postfix</span> ??????? </div> ????? </div> ??? </div> ? </div> ? <div class="row"> ??? <div class="large-6 columns"> ????? <div class="row collapse prefix-round"> ??????? <div class="small-3 columns"> ????????? <a href="#" class="button prefix">Go</a> ??????? </div> ??????? <div class="small-9 columns"> ????????? <input type="text" placeholder="Value"> ??????? </div> ????? </div> ??? </div> ??? <div class="large-6 columns"> ????? <div class="row collapse postfix-round"> ??????? <div class="small-9 columns"> ????????? <input type="text" placeholder="Value"> ??????? </div> ??????? <div class="small-3 columns"> ????????? <a href="#" class="button postfix">Go</a> ??????? </div> ????? </div> ??? </div> ? </div> </form> ```