如何用css证明表单输入字段的合理性？

Question

我有一个简单的注册输入表单（这里是 haml ：）

%form#signup
  %fieldset
    %input.email{type:'text'}
    %br
    .name
      %input.first-name{type:'text'}
      %input.last-name{type:'text'}

和css：

#signup { width: 350px; }
fieldset { width: 100%; }
.name { width: 100%; }
.first-name { width: 30%; }
.last-name { /* occupy remainder of 'name' line */ }

如何设置此样式，使.email 字段是fieldset 的全宽，.last-name 和/或.first-name 字段扩展为也填满fieldset 的整个宽度，并使用右边缘与.email 字段对齐？

是的，在这里使用table 可能更容易，但是有没有简单的css 方法？它只需要在兼容 css3 的浏览器上工作，并在 IE8 和 9 上合理降级。

小提琴链接：http://jsfiddle.net/3UP9H/1

Answer 1

原始答案出现在hr下方；为了清楚起见，问题的答案似乎是box-sizing（及其供应商前缀变体）的组合，以便在定义的元素width 中包含border-width 和padding ) （而不是它们的宽度是定义宽度 + 边框宽度 + 填充）和 font-size: 0 用于父元素，这消除了两个 input 元素之间的错误空间（尽管空间在技术上仍然存在；它只是没有任何大小来影响周围元素的位置）。

所以，CSS 就是下面第二个示例中的 CSS：

fieldset input[type=text] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    width: 350px;
}

fieldset div input[type=text] {
    width: 105px;
    margin: 0;
}

fieldset div input[type=text] + input[type=text] {
    float: right;
    width: 245px;
}

div.name {
    font-size: 0;
}​

JS Fiddle demo.

---

原答案如下：

一种方法似乎是：

form {
    width: 350px;
}

fieldset {
    width: 100%;
}

​fieldset input[type=text] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 350px;
}​​

fieldset div input[type=text] {
    width: 105px;
    margin: 0;
}

fieldset div input[type=text] + input[type=text] {
    float: right;
    width: 241px;
}​

JS Fiddle demo.

box-sizing（以及以供应商为前缀的变体）的用途是简单地将元素的border 以及任何已分配的padding 包含在元素的定义宽度内。

我在链接的演示中使用了自关闭标签input，因为input 元素，据我所知，没有关闭标签</input>。

我已经稍微修改了上面的内容，以消除错误空间的问题（在.name 元素中的兄弟input 元素之间需要任意更正以允许它们都在同一行上（因此奇怪width: 241px 在上面的 CSS 中）：

form {
    width: 350px;
}

fieldset {
    width: 100%;
}

fieldset input[type=text] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 350px;
}

fieldset div input[type=text] {
    width: 105px;
    margin: 0;
}

fieldset div input[type=text] + input[type=text] {
    float: right;
    width: 245px;
}

div.name {
    font-size: 0;
}​

JS Fiddle demo.

---

编辑以删除固定宽度的测量值，并替换为基于相对、百分比、基于单位的单位（如原始问题中所示）：

form {
    width: 350px;
}

fieldset {
    width: 100%;
}

fieldset input[type=text] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
}

fieldset div input[type=text] {
    width: 30%;
    margin: 0;
}

fieldset div input[type=text] + input[type=text] {
    float: right;
    width: 70%;
}

div.name {
    font-size: 0;
}​

JS Fiddle demo.

不幸的是，默认情况下无法将input 元素的宽度设置为100%，同时仍允许同级input 元素具有不同的宽度。或者，有，但它更尴尬，并且需要您明确地将两个兄弟姐妹标识为，尽管可以使用 + 或 ~ 组合符选择第二个或以后的兄弟姐妹，但无法选择 first 兄弟姐妹，基于其具有后续兄弟姐妹（没有 JavaScript 或其他脚本语言，无论是客户端还是服务器端）。

Answer 2

#signup { width: 350px; }
fieldset { width: 100%; border: 1px solid grey; padding:2px;}
.email { width: 99%;margin-bottom:2px; }
.name { width: 100%; }
.first-name { width: 30%; }
.last-name { width : 67% }

DEMO

更新

#signup { width: 350px; }
fieldset { width: 100%; border: 1px solid grey; padding:2px;}
.email { width: 99%;margin-bottom:2px; }
.name { width: 100%; }
.first-name { width: 30%; }
.last-name { width : 67%; float:right; }

DEMO

火狐截图。

Answer 3

将这两行更改为如下所示：

.email { width: 99%; float: right; }
.last-name { width: 65%; float: right;}​

Fiddle Link

编辑 奇怪的是，Chrome 和 IE 中的 width 是 Firefox 中没有的额外 4px 宽度。问题是 Chrome 和 IE 将边框添加到框的宽度，而 Firefox 会补偿内部文本字段的宽度以使其适合指定范围内的边框。请参阅this version of the fiddle 进行演示。

EDIT2检查此updated fiddle。