-1

このフィールドのフィールドセットの幅を設定してから、ラッパーと入力ボックスを流動的にして、使用可能なスペースを占有したいと思います。

これは私がここで少し助けを借りてどこまで得たかです：

.lft { float: left; }
ul, li { list-style-type: none; vertical-align:middle; }
.ts3 { font-size: 15px; }
.dc3 { background-color: #808080; }
.tc5 { color: #333333; }
.p4 { padding: 4px; }
.r2 { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.r6 { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.field { line-height:27px; font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; }
input.field{width:100%}
.fieldwrapper{display:inline-block; width:100%}
label{width:300px; display:inline-block; }
<ul>
    <li>
<div class="r6 dc3 ts2 p4">
<label field_id="None" for="sender">Sender email address</label>
<div class="fieldwrapper">
<input class="field" placeholder="Email" type="text" value="">
</div>
</div>
</li></ul>

ラッパーを100％に設定すると、全体からフィールドセットの幅を引いたものではなく、全体に広がります。

これは、私が流体幅のサイトで達成しようとしていることです。 フィールドセット

入力ボックスが利用可能なスペースを埋めますか？

4

3 に答える 3

1

追加

input.field{width:100%}
.fieldwrapper{display:inline-block; width:70%}
label{width:25%; display:inline-block; }​

ラベルの幅を調整し、それに応じて入力することができます。

デモhttp://jsfiddle.net/cskQ8/38/

新しいアップデート

input.field{width:100%}
.fieldwrapper{ padding: 0 5px 0 0;
    overflow: hidden;}
label{width:200px; display:inline-block; float:left}​

ここで更新されたデモを確認してください

于 2012-10-09T11:13:30.110 に答える
1

もちろん、ボタンをフロートさせてドキュメントフローから取り出しました。入力（フィールドラッパーではなく）のコンテナーに右のパディングを設定して、その右側の要素を補う必要があります。

 .containingDiv{padding-right:75px;}
 .fieldwrapper{width:100%;}
于 2012-10-09T11:16:46.120 に答える
0

現在、CSSとマークアップをよりセマンティックな方法で構造化すると、将来的には非常に感謝するでしょう。定義リストは、開始するのに適切な場所です。

<dl class="form-container clearfix">
  <dt><label for="sender">Sender email address</label></dt>
  <dd><input placeholder="Email" type="text" value="" /></dd>
</dl>

そしてCSS（クリアフィックスを含めることを忘れないでください）：

.form-container { /*just whatever styles you had applied*/}

/*label container, fixed width*/
.form-container>dt {float:left; width:150px;}

/*input container, defaults to width:auto*/
.form-container>dd { margin-left:150px; }

/*box-sizing property is the best thing since sliced bread*/
.form-container input[type=text] {width:100%;box-sizing:border-box;padding:4px;}

いじっ て、結果フレームのサイズを変更してみて、それがどれほど流動的であるかを確認してください！

于 2012-10-09T11:46:35.413 に答える