0

サイズ変更可能で、それぞれにラベルとテキストボックスを保持する4つの列(divまたはspan)を作成しようとしています。テキストボックスは、サイズ変更可能な列の幅を埋めます。ラベルの幅は固定です。

1 つの列でレイアウトを開始し、それを 3 回コピーしました。それは少し楽観的すぎました。div または span は互いの下に表示されます。表示スタイルで遊んだのですが、うまくいかないようです。

1 列のレイアウトは次の例のように機能します: http://jsfiddle.net/QaWMN/2/

.content .fieldname
{
    float: left;
    width: 140px;
}
.content .fieldcontrol
{
    display: block;
    overflow: hidden;
}
.content input[type="text"]
{
    width: 100%;
}    
<div class="content">
    <div class="col1">
        <div><label class="fieldname">Field 1</label><span class="fieldcontrol"><input type="text" id="Text1" /></span></div>
    </div>
</div>

どうすればこれを達成できますか？

4

2 に答える 2

0

display : inline-block（それらが互いに隣りwidth : 25%合うように）と（4つすべてを1行に収めることができるように）の組み合わせを配置する必要があります

ここ: http://jsfiddle.net/QaWMN/35/ おそらくパディングのため、幅が小さくなっています。

display : inline-block編集： a float : left -> http://jsfiddle.net/QaWMN/36/で置き換えることができます

于 2013-04-22T07:20:47.127 に答える