2

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

4

3 に答える 3

3

元の回答はhr;の下に表示されます。明確にするために、質問への答えは、box-sizing（およびそのベンダーが事前に設定したバリアント）の組み合わせであると思われます。 -width + パディング) と、2 つの要素間の誤ったスペースを削除する親要素の場合(ただし、スペースは技術的にはまだ存在しますが、周囲の要素の位置に影響を与えるサイズはありません)。border-widthpaddingwidthfont-size: 0input

したがって、CSS は以下の 2 番目の例のものです。

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 フィドルのデモ。

元の答えは次のとおりです。

1つの方法は次のようです：

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要素に異なる幅を持たせることはできます。または、ありますが、かなり厄介で、両方の兄弟を明示的に識別する必要があります。2 番目以降の兄弟を+または~コンビネータで選択することは可能ですが、後続の兄弟を持つことに基づいて最初の兄弟を選択することはできません。 (クライアント側かサーバー側かを問わず、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; }

デモ

Firefox のスクリーンショット。

ここに画像の説明を入力

于 2012-06-09T23:25:42.010 に答える
0

この 2 行を次のように変更します。

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

フィドル リンク

EDIT奇妙なことwidthに、Chrome と IE では、Firefox にはない余分な 4px 幅があります。問題は、Chrome と IE がボックスの幅に境界線を追加するのに対し、Firefox は指定された境界内の境界線に収まるように内部テキスト フィールドの幅を補正することです。デモンストレーションについては、このバージョンのフィドルを参照してください。

EDIT2この更新された fiddleを確認してください。

于 2012-06-09T23:29:17.083 に答える