2

我有一个简单的注册输入表格（这里是 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字段对齐？

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

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

4

3 回答 3

3

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

因此，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 小提琴演示。

原答案如下：

一种方法似乎是：

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元素具有不同的宽度。或者，有，但它更尴尬，并且需要您明确地将两个兄弟姐妹标识为，尽管可以使用+or~组合器选择第二个或以后的兄弟姐妹，但不可能根据其具有后续兄弟姐妹来选择第一个兄弟姐妹（没有 JavaScript 或其他脚本语言，无论是客户端还是服务器端）。

于 2012-06-10T00:00:48.617 回答
0 
#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% }

演示

更新

#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; }

演示

火狐截图。

在此处输入图像描述

于 2012-06-09T23:25:42.010 回答
0

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

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

小提琴链接

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

EDIT2检查这个更新的小提琴。

于 2012-06-09T23:29:17.083 回答