如何证明与CSS表单输入字段？(How to justify form input fields w

我有一个简单的注册输入表单（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 （及其供应商previxed变体），以包括所述border-width和padding在所定义的width的元件（一个或多个）的（而不是它们的宽度被限定宽度+边框宽度+填充）和font-size: 0父元素，从而消除了两者之间的错误的空间input元件（虽然空间，在技术上，仍然存在;它只是不具有任何尺寸来影响周围元件的位置）。

所以，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提琴演示 。

---

原来的答复如下：

一种方法似乎是：

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提琴演示 。

使用的box-sizing （和卖主前缀变体）是简单地包括border的元件，以及任何已分配的padding的限定的元件的宽度内。

我用自闭input标签链接的演示，因为input元素，所以据我所知，没有结束标记</input> 。

我已经修正了错误的空间（同级之间的上述情况，稍有，以除去问题input中的元素.name元件从需要任意的修正以使它们二者在同一行（因此奇怪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提琴演示 。

---

编辑以除去固定宽度的测量，并与相对的，百分比，基于单元取代（如在原来的问题）：

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提琴演示 。

不幸的是有没有办法来设置的宽input元素100%默认情况下，同时仍允许同级input元素具有不同的宽度。 或者说，有，但它实质上比较尴尬，需要明确识别两个兄弟姐妹，虽然有可能选择第二或更高版本，与同级+或~组合算符这是不可能的选择基于其具有第一兄弟随后的兄弟姐妹（无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

Firefox的截图。

Answer 3:

改变这两条线看起来像这样：

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

小提琴链接

编辑奇怪的是，大约width在Chrome和IE是，有一个额外的4像素宽度是不存在的Firefox浏览器。 问题是，Chrome和IE边框添加到框的宽度，而Firefox补偿内部文本框的宽度，使其在指定范围内适合的边界。 见这个版本的拨弄了演示。

EDIT2检查此更新的小提琴 。

文章来源: How to justify form input fields with css?