html - 表单输入元素和宽度

Question

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

一些示例标记可能是：

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

然后CSS将包括：

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

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

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

score 2 · Accepted Answer

您可以使用属性选择器：

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

或者

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

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

score 0 · Accepted Answer

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

2 回答 2