如何用css证明表单输入字段？ [英] How to justify form input fields with css?

问题描述

我有一个简单的注册输入表单（简称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 {/ *占用'name'行的剩余部分* /} 
  

如何设置样式，使 .email 字段是字段集和 .last-name 和/或 .first-name 字段展开以填充字段集的整个宽度 c>

是的，它可能更容易使用表这里但是有一个简单的方法与css？它只需要工作在css3兼容的浏览器，并适当降低IE8和9。

fiddle链接： http://jsfiddle.net/3UP9H/1

解决方案

低于 hr ;为了清楚起见，这个问题的答案似乎是 box-sizing （及其供应商的前缀变体）的组合，以便包括 width 中定义和 padding 而不是它们的宽度被定义width + border-width + padding）和 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; 
} 
 
字段集div输入[type = text] + input [type = text] {
 float：right; 
 width：245px; 
} 
 
 div.name {
 font-size：0; 
} 
  

JS Fiddle demo 。

---

一种方式似乎是：

 表单{
 width：350px; 
} 
 
 fieldset {
 width：100％; 
} 
 
字段集输入[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> 。 / p>

我已经修改了上述内容，稍微删除了错误空格的问题（在兄弟输入元素在 .name 元素中需要任意修改，以允许它们在同一行（因此奇怪的 width：241px 在上述CSS中）：

 表单{
 width：350px; 
} 
 b $ b 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％; 
} 
 
字段集输入[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 。

不幸的是没有办法设置默认情况下，输入元素到 100％，同时仍允许同级元素有不同宽度。或者，有，但是它显着更尴尬，并要求你明确地确定兄弟姐妹为，虽然可以选择第二个或更晚的兄弟姐妹与 + 或〜组合器，无法基于其后续的兄弟姐妹（无JavaScript或其他脚本语言，无论是客户端还是服务器）选择先 - ，side）。

I have a simple signup input form (haml for brevity here:)

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

and css:

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

How to style this so that the .email field is the full width of the fieldset and the .last-name and/or .first-name fields expand to also fill the entire width of the fieldset and with the right edge aligned with the .email field?

Yes it might be easier to use a table here but is there a simple way with css? It need only work for css3 compliant browsers and degrade reasonably for IE8 and 9.

fiddle link: http://jsfiddle.net/3UP9H/1

解决方案

Original answer appears below the hr; the answer to the question, for clarity, appears to be a combination of box-sizing (and its vendor-previxed variants), in order to include the border-width and padding in the defined width of the elements(s) (rather than their width being defined-width + border-width + padding) and font-size: 0 for the parent element, which removes the errant space between the two input elements (although the space is, technically, still there; it just doesn't have any size to influence the position of the surrounding elements).

So, the CSS is that from the second example below:

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.

---

Original answer follows:

One way seems to be:

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.

The use of box-sizing (and the vendor-prefixed variants) is to simply include the border of the element, and any assigned padding within the defined width of the element.

I've used self-closing input tags in the linked demo, since input elements, so far as I know, don't have closing tags </input>.

I've amended the above, slightly, to remove the issue of the errant space (between the sibling input elements in the .name element from requiring arbitrary corrections to allow them both on the same line (hence the strange width: 241px in the above 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.

---

Edited to remove the fixed-width measurements, and replaced with relative, percentage, based units (as in the original question):

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.

Unfortunately there's no way to set the width of the input elements to 100% by default, while still allowing sibling input elements to have differing widths. Or, there is, but it's substantially more awkward and requires you to explicitly identify both siblings as, although it's possible to select the second, or later, sibling with the + or ~ combinators it's not possible to select the first sibling based on its having subsequent siblings (without JavaScript, or other scripting language, whether client-, or server-, side).

这篇关于如何用css证明表单输入字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！