表单输入元素和宽度

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引导为例。 （有可能做流体和柱式网格）。之后，您可以专注于个性化您的网站和编程核心功能 - 无需考虑这么多次要/基本布局问题:)