3

私は次のように構造化された要素を持つフォームを持っています:

<div>
   <label>Name</label>
   <input type="text" name="name" />
</div>

<div>
   <label>Address</label>
   <input type="text" name="address" />
</div>

私が望む方法は、ラベルが入力ボックスの横に配置され、入力ボックスがコンテナ全体に収まるように拡張されることです。入力ボックスに手動で幅をピクセル単位で設定すると、各ボックスが同じ長さになるわけではありません。

幅を 100% に設定しようとすると、幅全体を拡張するために入力ボックスが新しい行に折り返されます。

ラベル (幅は可変) を入力ボックスの左側に配置し、それらの入力ボックスを含む div に合わせて拡張するにはどうすればよいですか?

これが私の現在のCSSです：

#content form input
{
   border: none;
   height: 23px;
   position: relative;
   top: -1px;
   left: -5px;
   padding-top: 5px;
   text-indent: 10px;
   display: inline-block;
}  

#content form label
{
   background: #c6c9c0 url('../images/form-label-bg.jpg') no-repeat center right;
   height: 28px;
   line-height: 30px;
   display: inline-block;
   text-indent: 15px;
   padding-right: 25px;
   color: #6a6a6a;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 8pt;
}
4

2 に答える 2

3

これを試して：

form div {
    display: table;
    width: 100%;
}
label,
input { 
    display: table-cell;
}
label{ 
    width: 200px;
}
input {
    width: 100%;
}
于 2009-12-17T07:23:14.503 に答える
1

テーブル内のすべての「列」も同じ幅になるため、テーブルを使用しても可能だとは思いません。

私が推測する入力の幅を手動で定義する必要があります。ただし、px の代わりに % を使用してください。

于 2009-12-17T06:50:01.730 に答える