表單輸入元素和寬度

Question

現在我已經使用一個封閉元素的寬度在窗體等等上放置了輸入元素。 div標記，然後將％寬度應用於所有表單元素，如input和textarea。

一些示例標記可能是：

<div class="span4"> 
    <label>Form Label</label> 
    <input type="text" value="My Value"/> 
</div> 

的CSS隨後將包括：

form input, form textarea { 
    width: 95%; 
} 

我本來想出這個以避免額外指定的窗體大小信息的手段元素以及塊元素。無論如何，用這種方法，我似乎不斷進入這種方便打破其他事情的場景，例如當我在元素旁邊放置按鈕時。

我的問題是，是否有其他人已經使用的直接放置表單元素的寬度的替代方法。

Answer 1

你可以使用屬性選擇：

form input[type="text"], form textarea { 
    width: 95%; 
} 

或

form input, form textarea { 
    width: 95%; 
} 
form input[type="button"]{ 
    width:auto; 
} 

但是，你正在做正確的方式：CSS旨在定義樣式，和寬度是一種風格。

Answer 2

您是否考慮嘗試一些響應式設計框架？如果您在嘗試爲元素提供可擴展的味道時已將百分比用作寬度，則應嘗試以twitter引導爲例。 （有可能做流體和柱式網格）。之後，您可以專注於個性化您的網站和編程核心功能 - 無需考慮這麼多次要/基本佈局問題:)