0

テキスト入力とテキストエリアを含むフォームを作成しようとしています。ラベルは左側に 200px 幅で、入力は右側に配置して、使用可能なすべてのスペースを使用します。

このように定義リストをレイアウトすると、用語に 200px の幅を与えて左にフロートさせ、定義に 200px の左マージンを与えることができました。これは、利用可能なすべての幅を定義で使用するのに十分でした。ここをチェックしてください：http://jsfiddle.net/jmuheim/kjf8f/

現在、テキスト入力とテキストエリアに同じように動作するように指示することに成功していません。width:100% にしてみましたが、余白が 200px あるので広すぎます。

label {
    display: block;
    margin: 0;
    background-color: green;
    float: left;
    clear: left;
    width: 200px;
}
input[type="text"], textarea {
    display: block;
    margin: 4px 0 4px 200px;
    background-color: red;
}

http://jsfiddle.net/jmuheim/WWWs3/

そして、入力フィールドの上の「マージン」はどこから来ているのでしょうか? テキストエリアにはこれがありません。textarea はコンテナタグで、input はそうではないからですか? これを回避する方法はありますか? 追加のスパン、div などのヘルパー マークアップは必要ありません。

そして、ラベルとテキスト入力/領域を独自の定義リストに入れ、両方に 100% の幅を与えるのは適切でしょうか? フォーム入力を定義リストに入れるために、これは推奨されるマークアップですか?

どんな助けでも大歓迎です。

4

2 に答える 2

1

jQueryを使用しても問題ない場合

var block_width = $('.block').width()
var input_width = block_width -200
$('.block input, .block textarea').width(input_width)

フィドル

于 2013-10-03T07:47:25.233 に答える