表单输入元素和宽度答案

【问题标题】：Form input elements and widths表单输入元素和宽度
【发布时间】：2012-08-02 19:10:09
【问题描述】：

一段时间以来，我一直在通过使用封闭元素的宽度在表单等上布置输入元素，例如div 标记，然后将 % 宽度应用于所有表单元素，例如 input 和 textarea。

一些示例标记可能是：

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

css 将包括：

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

我最初提出这个方法是为了避免在表单元素和块元素上额外指定大小信息。无论如何，通过这种方法，我似乎不断遇到这种便利破坏其他事情的场景，例如当我在元素旁边放置一个按钮时。

我的问题是，是否有任何好的替代方法可以直接在其他人一直在使用的表单元素上设置宽度。

【问题讨论】：

【解决方案1】：

你可以使用属性选择器：

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

或

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

但你这样做是正确的：CSS 旨在定义样式，而宽度是一种样式。

【讨论】：

【解决方案2】：

您是否考虑过尝试一些响应式设计框架？如果您在尝试赋予元素可扩展的味道时已经使用百分比作为宽度，您应该尝试使用 twitter bootstrap。（有可能做流体和列式网格）。之后，您可以专注于个性化您的网站和编程核心功能 - 无需考虑那么多次要/基本的布局问题 :)

【讨论】：